jQuery单选按钮仅选择一个（ID）

Question

I have 2 groups raido buttons, they have different unique IDs, how to make they can be selected only one for each group. Thanks

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

I don't want to change the html, just want to use jQuery to achieve

Answer 1

If you really must use the existing HTML, then I'd suggest amending the HTML via jQuery to simply use the default functions of a radio input:

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

JS fiddle demo .

References:

• attr() .
• each() .

Answer 2

Give each item in the group a common name using the name attribute.....

<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

Using jQuery, you can use something like this:

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

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

But this assumes your HTML structure is exactly as you provided.

If the radio buttons have any kind of wrapping HTML on them, or are grouped inside any way, the use of siblings won't work. You might have to use something like:

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

And obviously change the use of "group" to whatever you are actually using (I thought I saw you edited your original question to not use <group> ).