javascript - 可点击的svg功能

Question

我有 svg 圆圈，每个下面都有单选按钮，我想根据 svg 点击来控制单选按钮的行为，当我点击第一个 svg 时，它下面的单选按钮被选中，当我点击下一个时，第一个应该取消选中，第二个应该选中，依此类推，这是我迄今为止尝试过的：

$(".circle").click(function(){
    $(this).next().prop('checked',true);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<svg height="100" width="100">
  <circle class="circle" cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>
<input type="radio" name="check">

<svg height="100" width="100">
  <circle class="circle" cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="green" />
</svg>
<input type="radio" name="check">

<svg height="100" width="100">
  <circle class="circle" cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="blue" />
</svg>
<input type="radio" name="check">

标签： javascriptjqueryhtmlsvgradio-button

Answer 1

只需name为具有相同值的每个单选按钮添加属性。

见代码片段：

$("svg").click(function(){
    $(this).next().prop('checked', true);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<svg height="100" width="100">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>
<input type="radio" name="rd">

<svg height="100" width="100">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="green" />
</svg>
<input type="radio" name="rd">

<svg height="100" width="100">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="blue" />
</svg>
<input type="radio" name="rd">