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">

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">