从选定的一个中选择下一个单选按钮 [英] Selecting next radio button from selected one

问题描述

我有一个单选按钮组，我想选择一个按钮组.

I have a radio button group and I want to select the one next to the selected one.

$(document).ready(function() {
  $('.next').click(function() {
    $("input[name=choice]:checked").next().click();
  });
});

.button {
  display: inline-block;
  padding: 1em;
  margin: 20px;
  border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" id="choise_1" name="choice" checked="checked" />
<label for="choise_1">One</label>

<input type="radio" id="choise_2" name="choice" />
<label for="choise_2">Two</label>

<input type="radio" id="choise_3" name="choice" />
<label for="choise_3">Three</label>

<div class="button next">SELECT NEXT</div>

这是我所拥有的但不起作用

This is what I have but it is not working

推荐答案

代码中的更改是您不必触发click即可检查radio s，而可以更改属性使用.prop()方法.

The change in the code is that you don't have to trigger click to check the radios, instead you can change the property checked with .prop() method.

您需要 .nextAll(':radio:first') :

说明:获取匹配元素集中每个元素的所有后续同级元素，由选择器选择过滤.

Description: Get all following siblings of each element in the set of matched elements, optionally filtered by a selector.

在此.nextAll(filter)使用此方法，您不必担心设计是否更改或在列表中添加其他元素.它将始终仅以:radio为目标，直到它共享同一个父对象.

Here .nextAll(filter) with this method you don't have to worry about if your design changes or you add another element in the list. It will always target the :radios only till it shares the same parent.

$(document).ready(function() {
  $('.next').click(function() {
    $("input[name=choice]:checked").nextAll(':radio:first').prop('checked', true);
  });
});

.button {
  display: inline-block;
  padding: 1em;
  margin: 20px;
  border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" id="choise_1" name="choice" checked="checked" />
<label for="choise_1">One</label>

<input type="radio" id="choise_2" name="choice" />
<label for="choise_2">Two</label>

<input type="radio" id="choise_3" name="choice" />
<label for="choise_3">Three</label>

<div class="button next">SELECT NEXT</div>

这篇关于从选定的一个中选择下一个单选按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！