CODEWITHSUNDEEP
javascriptjquery
olo
olo

Reputation: 5271

jQuery radio button select only one (ID)

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

Upvotes: 0

Views: 2228

Answers (3)

Ian
Ian

Reputation: 50905

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

Upvotes: 1

David Thomas
David Thomas

Reputation: 253318

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:

Upvotes: 4

LDJ
LDJ

Reputation: 7304

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

Upvotes: 1

Related Questions