使用 jQuery 选择多个单选按钮组的第一个单选按钮

Select the first radio button of multiple radio buttons groups with jQuery

提问by Vincent

I would like to automatically select the first radio button of multiple radio buttons groups.

我想自动选择多个单选按钮组的第一个单选按钮。

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

Here is the thing, while this works:

这是事情，虽然这有效：

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

I can't figure out why I can't make it work using the :first selector using the each() method

我不明白为什么我不能使用 :first 选择器使用 each() 方法使它工作

The code below doesn't work: it only selects the first radio button in the first div, can you tell me why?

下面的代码不起作用：它只选择第一个 div 中的第一个单选按钮，你能告诉我为什么吗？

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

Thanks

谢谢

回答by Rob W

The first selector loops through each .element. The second selector loops through each element input[type=radio]:first, which consists of only one element.

第一个选择器循环遍历每个.element。第二个选择器循环遍历 each element input[type=radio]:first，它只包含一个元素。

I've translated your code to a human-readable sequence:

我已将您的代码翻译成人类可读的序列：

1. Select .element
   Go through each .element
   Find the first occurence of a radio input element
   Set checked=true.
2. Select the first radio input element which is a child of .element.
   Loop through each element which matches the selector (just one)
   Set checked=true.

1. 选择.element
   Go through each.element
   查找第一次出现的单选输入元素
   Set checked=true。
2. 选择第一个单选输入元素，它是 的子元素.element。
   循环遍历与选择器匹配的每个元素（只有一个）
   Set 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);
});

回答by maxedison

The simplest way is to use the :first-childselector. As opposed to :first, which only returns the first of the matched elements, :first-childwill return any element that is the first child of its parent element:

最简单的方法是使用: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');

See Rob W's answer for an explanation of why your code isn't working.

请参阅 Rob W 的回答以了解您的代码为何不起作用。

回答by Headshota

Try using nth-child:

尝试使用 nth-child：

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

回答by sandeep kumar

You can also do this with Radio Button Class Name

您也可以使用 Radio Button Class Name执行此操作

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

回答by user3099298

For me, first-childdid not work, and I did not use eachfor loop the elements,

对我来说，first-child没有用，而且我没有使用eachfor 循环元素，

This worked for me,

这对我有用，

$('.element input[type=radio]:first').attr('checked', true);