Выберите первую радиокнопку из нескольких групп радиокнопок с помощью jQuery

Question

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

<div class="element">
<input type="radio" name="group1" value="1">
<input type="radio" name="group1" value="2">
<input type="radio" name="group1" value="3">
</div>

<div class="element">
<input type="radio" name="group2" value="1">
<input type="radio" name="group2" value="2">
<input type="radio" name="group2" value="3">
</div>

Дело в том, что это работает:

$('.element').each(function(){
    $(this).find('input[type=radio]:first').attr('checked', true);
});

Я не могувыяснить, почему я не могу заставить его работать, используя: first селектор, используя метод each ()

Приведенный ниже код не работает: он выбирает только первую радиокнопку в первом div, вы можете сказать,мне почему?

$('.element input[type=radio]:first').each(function(){
    $(this).attr('checked', true);
});

Спасибо

Answer 1

Первый селектор проходит через каждый .element.Второй селектор проходит через каждый element input[type=radio]:first, который состоит только из одного элемента.

Я перевел ваш код в удобочитаемую последовательность:

1. Выбрать .elementПройдите каждый .elementНайти первое вхождение элемента радиовходаУстановите checked=true.
2. Выберите первый элемент радиовхода, который является дочерним по отношению к .element.Перебрать каждый элемент, который соответствует селектору (только один)Набор checked=true.

Альтернативные способы:

//Alternative method
$('element').each(function(){
    $('input[type=radio]', this).get(0).checked = true;
});

//Another method
$('element').each(function(){
    $('input[type=radio]:first', this).attr('checked', true);
});

Answer 2

Самый простой способ - использовать селектор :first-child. В отличие от :first, который возвращает только первый из соответствующих элементов, :first-child вернет любой элемент, который является первым дочерним элементом его родительского элемента:

//returns the first radio button in group1, and the first one in group2 as well.
$('.element input[type=radio]:first-child');

См. Ответ Роба В., где объясняется, почему ваш код не работает.

Answer 3

Попробуйте использовать nth-child:

$('.element').each(function(){
    $(this).find('input[type=radio]:nth-child(1)').attr('checked', true);
});

Answer 4

Вы также можете сделать это с переключателем Имя класса

<div class="element">
<input class="radio_btn" type="radio" name="group1" value="1">
<input class="radio_btn" type="radio" name="group1" value="2">
<input class="radio_btn" type="radio" name="group1" value="3">
</div>

<div class="element">
<input class="radio_btn" type="radio" name="group2" value="1">
<input class="radio_btn" type="radio" name="group2" value="2">
<input class="radio_btn" type="radio" name="group2" value="3">
</div>

<script>
$('.radio_btn:first').attr('checked', true);
</script>