How to uncheck checked radio buttons in jquery?

Question

What I want to do is pretty simple. Look at this form:

<input type="radio" id="Car"><label for="Car">Car</label>
<input type="radio" id="Bike"><label for="Bike">Car</label>

With the following script:

$("input:radio").button().click(function(event){
    $(this).siblings().prop('checked', false);
});

Now this code doesn't make the radio buttons mutually exclusive. If I change "radio" to "checkbox" everything works ok. But I want to understand why this doesn't work with radio input? Is this a bug with jQuery or I am missing something important?

Answer 1

In order to group radios they need to share common name. The checked property is then managed by browser

HTML copied directly from jQueryUI radio demo

<input type="radio" id="radio1" name="radio"><label for="radio1">Choice 1</label>
<input type="radio" id="radio2" name="radio" checked="checked"><label for="radio2">Choice 2</label>
<input type="radio" id="radio3" name="radio"><label for="radio3">Choice 3</label>

Answer 2

Do you mean, how to make them mutually exclusive? Assign them the same "name" attribute.