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

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./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

• javascript
• jquery
• html
• radio-button

Share Improve this question Follow asked Dec 8, 2015 at 11:55 chiapachiapa 4,4121111 gold badges7070 silver badges108108 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

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.

You need .nextAll(':radio:first'):

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

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./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>

try this fiddle (just ensure that next() is called twice since there is a label between two checkboxes)

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

next() just gets the immediately following sibling.

The next element in tree is label, so you need to use next() twice to get next radio button