Question

我有2组raido按钮，它们有不同的唯一ID，如何使它们只能为每个组选择一个。感谢

<group>
<input type="radio" id="u1"/>1
<input type="radio" id="u2"/>2
<input type="radio" id="u3"/>3
</div >
</group>


<group>
<input type="radio" id="T1"/>4
<input type="radio" id="T2"/>5
<input type="radio" id="T3"/>6
</group>

http://jsfiddle.net/pZdWu/

我不想改变html，只想用jQuery来实现

Answer 1

如果你真的必须使用现有的HTML，那么我建议通过jQuery修改HTML，只使用无线电输入的默认功能：

$('group').each(
    function(i,e){
        $(e).find('input:radio').attr('name', 'group' + i);
    });

JS fiddle demo

参考文献：

attr()。
each()。

Answer 2

使用name属性.....为组中的每个项目指定一个通用名称。

<input type="radio" name="group1" id="u1"/>1
<input type="radio" name="group1" id="u2"/>2
<input type="radio" name="group1" id="u3"/>3

Answer 3

使用jQuery，您可以使用以下内容：

http://jsfiddle.net/pZdWu/5/

$(document).ready(function () {
    $("input[type=radio]").click(function () {
        var $this = $(this);
        $this.siblings("input[type=radio]").prop("checked", false);
    });
});

但这假设您的HTML结构与您提供的完全一样。

如果单选按钮上有任何类型的包装HTML，或者以任何方式分组，则使用siblings将不起作用。您可能必须使用以下内容：

http://jsfiddle.net/pZdWu/7/

$(document).ready(function () {
    $("input[type=radio]").click(function () {
        var $this = $(this);
        $this.parents("group:first").find("input[type=radio]").not($this).prop("checked", false);
    });
});

显然，将“群组”的使用更改为您实际使用的任何内容（我以为我看到您编辑了原始问题而不使用<group>）。

jQuery单选按钮只选一个（ID）

3 个答案: