如何通过单击按钮更改选中的下一个单选按钮？

Question

1:<input type="radio" name="option" class="radio1" checked />
<br>
2:<input type="radio" name="option" class="radio2" />
<br>
3:<input type="radio" name="option" class="radio3" />
<br>
4:<input type="radio" name="option" class="radio4" />
<br>
5:<input type="radio" name="option" class="radio5" />
<br>
<button class="button">
click
</button>

fiddle link

代码不起作用！

通过单击按钮，选中下一个单选按钮。

Answer 1

您没有将jquery链接到您的代码。添加jQuery，它应该可以工作。

演示：

$(".button").click(function() {
    var i = $('input[name=option]:checked').val();
    var index = parseInt(i) + 1;
    if (index > $('input[name=option]').length) index = 1;
    $('.radio' + index).prop('checked', true);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
1:<input type="radio" name="option" class="radio1" value="1" checked />
<br>
2:<input type="radio" name="option" class="radio2" value="2"/>
<br>
3:<input type="radio" name="option" class="radio3" value="3"/>
<br>
4:<input type="radio" name="option" class="radio4" value="4"/>
<br>
5:<input type="radio" name="option" class="radio5" value="5"/>
<br>
<button class="button">
click
</button>

Answer 2

您可以尝试

$(".button").click(function() {
        $('.radio1').prop('checked', false); 
      // or
        $('.radio2').prop('checked', true);
  
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    1:<input type="radio" name="option" class="radio1" checked />
    <br>
    2:<input type="radio" name="option" class="radio2" />
    <br>
    3:<input type="radio" name="option" class="radio3" />
    <br>
    4:<input type="radio" name="option" class="radio4" />
    <br>
    5:<input type="radio" name="option" class="radio5" />
    <br>
    <button class="button">
    click
    </button>