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

可点击的SVG功能

1 个答案: