Question

我的表格中有3对名为“gender []”的单选按钮。我想使用jQuery检查每对的第一个值。我在想这可以解决问题：

jQuery('[name="gender\\[\\]"]:eq(1)').attr('checked', 'checked');
jQuery('[name="gender\\[\\]"]:eq(2)').attr('checked', 'checked');
jQuery('[name="gender\\[\\]"]:eq(3)').attr('checked', 'checked');

相反，此代码仅检查第二对（？）的第二个值。如果我这样做：

jQuery('[name="gender\\[\\]"]:eq(1)').attr('checked', 'checked');

第一对的第二个值是check，这是正常的。但是如果我有这样一行代码：

jQuery('[name="gender\\[\\]"]:eq(1)').attr('checked', 'checked');
jQuery('[name="gender\\[\\]"]:eq(2)').attr('checked', 'checked');

检查第二对的第一个值。但是第一对完全没有被检查，好像第二行代码“取消”了第一行。

究竟发生了什么以及如何检查每对的第一个值？

Answer 1

JSFiddle

请检查上面的小提琴。据我所知，您是否正在尝试使用一组单选按钮并检查所有第一个？

<强> HTML：

Group1:
<input type="radio" name="group1"/>
<input type="radio" name="group1"/>
<input type="radio" name="group1"/>
<br/>
Group2:
<input type="radio" name="group2"/>
<input type="radio" name="group2"/>
<input type="radio" name="group2"/>
<br/>
Group3:
<input type="radio" name="group3"/>
<input type="radio" name="group3"/>
<input type="radio" name="group3"/>

<强> JQuery的：

$('input:radio[name="group1"]').eq(0).attr('checked',true);
$('input:radio[name="group2"]').eq(0).attr('checked',true);
$('input:radio[name="group3"]').eq(0).attr('checked',true);

Answer 2

http://jsfiddle.net/j7wgm/2/

在Navin HTML上使用此js：

var checked = [];
$('input:radio').each(function(){
    var $el = $(this);
    var name = $el.attr('name');
    if (checked.indexOf(name) === -1){
        checked.push(name);
        $el.prop('checked', true);
    }
});

Answer 3

由于您的所有单选按钮都具有相同的名称，即＆＃34;性别[]＆＃34;：

<input type="radio" name="gender[]" />

这意味着只能选择一个按钮。因此，在您的方案中，您将无法检查每对的第一个值＆＃34;。

查看＆＃39;输入＆＃39;在Mozilla documentation中输入以供参考：

具有相同name属性值的单选按钮位于相同的＆＃34;单选按钮组＆＃34 ;; 一次只能选择一个组中的一个单选按钮。

我已经创建了这个jsFiddle：

http://jsfiddle.net/Fresh/MJsnL/

要证明问题。

Answer 4

jsfiddle

我采取了一些自由，因为html在任何地方都没有明确定义。这是否接近您的html？

HTML使用fieldsets将radio按钮分开。我只使用.report ul将返回的值放在我的示例中。

<form>
    <legend>I have 3 pairs of radio buttons named "gender[]" in my form. I want to check the first value of each pair using jQuery. I was thinking that this would do the trick:</legend>
    <fieldset>
        <label for="gender[]">Group1:</label>
        <input type="radio" name="gender[]"/>
        <input type="radio" name="gender[]"/>
    </fieldset>
    <fieldset>
        <label for="gender[]">Group2:</label>
        <input type="radio" name="gender[]"/>
        <input type="radio" name="gender[]"/>
    </fieldset>
    <fieldset>
        <label for="gender[]">Group3:</label>
        <input type="radio" name="gender[]"/>
        <input type="radio" name="gender[]"/>
    </fieldset>
</form>
<ul class="report">
</ul>

JS：使用fieldsets创建for each loop，然后只检查了那里的第一个radio ...

var $radios = $("input[type=radio]");
var checkInput = function(evt){
    $("form").find("fieldset").each(function(){
        var $this = $(this),
            $firstRadio = $this.find("input[type=radio]").eq(0);
        $( "<li>" + $firstRadio.is(":checked") + "</li>").appendTo(".report");
    });
}
$radios.on("change", checkInput);

Answer 5

你有什么：

您的问题源于对单选按钮如何工作的误解。根据{{3}}，单选按钮使用name属性进行分组。您已经知道每组只能选择一个单选按钮。由于您的所有单选按钮都具有相同的组名，因此您应该只能选择一个。这是此MDN documentation所示的预期行为。

您的原始HTML可能如下所示：

<input type="radio" name="gender[]"/>  //:eq(0)
<input type="radio" name="gender[]"/>  //:eq(1)
<input type="radio" name="gender[]"/>  //:eq(2)
<input type="radio" name="gender[]"/>  //:eq(3) This is the one that is finally selected
<input type="radio" name="gender[]"/>
<input type="radio" name="gender[]"/>

你需要什么：

为了能够选择多个这些单选按钮，您需要为每对选项指定一个唯一名称。像这样：

<input type="radio" name="gender1"/>
<input type="radio" name="gender1"/> //First group
<input type="radio" name="gender2"/>
<input type="radio" name="gender2"/> //Second group
<input type="radio" name="gender3"/>
<input type="radio" name="gender3"/> //Third group

但是现在你的选择器不起作用了。您只需要稍微修改一下：

jQuery('input[name^="gender"]:eq(1)').attr('checked', 'checked');

此代码使用fiddle，它找到以值开头的属性。在这种情况下，它会查找名称以“gender”开头的所有输入。然后，您可以使用之前想要的索引。这是工作 ^= CSS selector 。

最后，您可能需要查看Fiddle的工作原理。它基于0，意味着第一个元素是元素0，而不是元素1.因此，要选择每对中的第一个单选按钮，您需要数字0,2和4。

使用jQuery.eq（）选择HTML单选按钮

5 个答案: