Выбор следующей радиокнопки с выбранной

Question

У меня есть группа переключателей, и я хочу выбрать одну из них рядом с выбранной.

$(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>

Это то, что у меня есть, но он не работает

Answer 1

Изменение кода является то, что вы не должны триггером click, чтобы проверить radio s, вместо этого вы можете изменить свойство checked с помощью метода .prop().

Вы должны .nextAll(':radio:first'):

Описание: Получить все последующих братьев каждого элемента в наборе соответствующих элементов, необязательно фильтруют с помощью селектора.

Здесь .nextAll(filter) с помощью этого метода вам не нужно беспокоиться о том, изменился ваш дизайн или добавлен еще один элемент в список. Он всегда будет нацелен на :radio s только до тех пор, пока он не будет разделен с одним и тем же родителем.

$(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>

Answer 2

попробовать это fiddle (только убедитесь, что следующий() вызывается дважды, так как есть метка между двумя флажками)

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

next() только что получил сразу следующий родственник.

Следующий элемент дерева этикетки, так что вам нужно использовать следующий() дважды, чтобы получить рядом радио кнопка