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;
}

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><inputtype="radio"id="choise_1"name="choice"checked="checked" /><labelfor="choise_1">One</label><inputtype="radio"id="choise_2"name="choice" /><labelfor="choise_2">Two</label><inputtype="radio"id="choise_3"name="choice" /><labelfor="choise_3">Three</label><divclass="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