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

时间:2011-10-01 13:36:10

标签: jquery jquery-selectors

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

<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()方法使用第一个选择器

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

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

由于

5 个答案:

答案 0 :(得分:10)

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

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

  1. 选择.element
    遍历每个.element左侧查找无线电输入元素的第一次出现
    设置checked=true
  2. 选择第一个无线电输入元素,它是.element的子元素。
    循环遍历与选择器匹配的每个元素(只有一个)
    设置checked=true
  3. <小时/> 替代方式:

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

答案 1 :(得分: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');

请参阅Rob W的答案,解释为什么您的代码无效。

答案 2 :(得分:1)

尝试使用nth-child:

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

答案 3 :(得分:0)

您也可以使用单选按钮类名

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

答案 4 :(得分:0)

对我来说,Sub ShowHideWeeksData() Dim addr As Object, rs As Long, cs As Long 'addr is the address of the button 'rs is the row number 'cs is the column number Dim offset1 As Long 'offset for rows value Dim offset2 As Long 'offset 2 for row value Dim rs1 As Long Dim rs2 As Long Dim rng As Range Dim sheet As Worksheet 'rng is the cell the button is in Set sheet = Worksheets("Sheet1") Set addr = sheet.Shapes(Application.Caller) 'address of the shape using the macro (i.e. the button) 'this part will figure out where the button I just clicked is With addr.TopLeftCell 'coordinates of the top left cell of the button rs = .Row 'row number of the button clicked cs = .Column 'column number of button clicked End With offset1 = 1 'select 1 row below button offset2 = 2 'select second row bellow button rs1 = rs + offset1 rs2 = rs + offset2 With sheet 'the button defaults with the text hide this week, then if clicked it should hide the two rows 'if the rows are hidden then the text on the button will change to show this week and will show if clicked If .Shapes("HideWeekBtn").TextFrame2.TextRange.Text = "Show This Week" Then .Shapes("HideWeekBtn").TextFrame2.TextRange.Text = "Hide This Week" .Range(.Cells(rs1, cs), .Cells(rs2, cs)).EntireRow.Hidden = False Else .Shapes("HideWeekBtn").TextFrame2.TextRange.Text = "Show This Week" .Range(.Cells(rs1, cs), .Cells(rs2, cs)).EntireRow.Hidden = True End If End With End Sub 不起作用,我也没有使用first-child来循环元素,

这对我有用,

each