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. This is what I have but it is not working

Solution 1:

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

Solution 2:

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