选择一个单选按钮时，Javascript单选按钮取消选择其他按钮？

Question

I have two radio buttons for selecting cars. There are only two options: either you can select a BMW car or you can select a Mercedes car.

Here's my html code for this:

<label>Please specify car:</label>&nbsp; &nbsp;
<label>BMW</label>
<input type="radio" name="is_BMW" id="is_BMW" onchange="valueChanged()" />
&nbsp;&nbsp;
<label>Mercedes</label>
<input type="radio" name="is_Mercedes" id="is_Mercedes" onchange="valueChanged()" />

The javascript function for this event is valueChanged() and it is pretty much straight-forward:

<script>
    function valueChanged(){
        if(document.getElementById("is_BMW").checked == true)
        {
            document.getElementById("is_Mercedes").checked = false;
        }
        else
        {
            document.getElementById("is_BMW").checked = false;
        }
    }
</script>

The problem I'm getting is this: whenever I click the BMW radio button, it get's fixed and I can't change to Mercedes.

If I click on the Mercedes radio button first, then I'm able to switch to BMW, but again, once I select BMW, I can't change to Mercedes anymore and it get's fixed.

Is there anything wrong with my Javascript? Because my Javascript knowledge tells me there's nothing wrong with my Javascript code. Is it something else? Should I use jQuery to resolve this?

Edit-1 : I'm sorry I forgot to mention one crucial point - I need to pass value onchange of radio button. I'm especially sorry to the one person who answered my question instantly, I should've mentioned this earlier, my bad.

Hence, my actual Javascript could should be something like this:

<script>
        function valueChanged(){
            if(document.getElementById("is_BMW").checked == true)
            {
                document.getElementById("is_Mercedes").checked = false;
                document.getElementById("is_BMW").value = 1;
                document.getElementById("is_Mercedes").value = 0;
            }
            else
            {
                document.getElementById("is_BMW").checked = false;
                document.getElementById("is_BMW").value = 0;
                document.getElementById("is_Mercedes").value = 1;
            }
</script>

Answer 1

I'm changing my answer according to your requirement.

In your HTML give same name to both radio buttons. This will take care of select and deselect .

<label>Please specify car:</label>&nbsp; &nbsp;
<label>BMW</label>
<input type="radio" name="car" id="is_BMW" />
&nbsp;&nbsp;
<label>Mercedes</label>
<input type="radio" name="car" id="is_Mercedes" />

And put the value changing logic in js like bellow

function valueChanged() {
    if (document.getElementById("is_BMW").checked == true) {
        document.getElementById("is_BMW").value = 1;
        document.getElementById("is_Mercedes").value = 0;
    } else {
        document.getElementById("is_BMW").value = 0;
        document.getElementById("is_Mercedes").value = 1;
    }
    console.log(document.getElementById("is_BMW").value);
    console.log(document.getElementById("is_Mercedes").value)
}

Explanation:-

The name setting tells which group of radio buttons the field belongs to. When you select one button, all other buttons in the same group are unselected.

updated demo

Answer 2

The radio button is unlike a check box because only one element can be selected at a time. But, in order for this to work, the radio buttons must be 'grouped' together.

This is done by specifying input elements with the same name .

In your example, this can be achieved by changing the following in your HTML:

<input type="radio" name="car_type" id="BMW" />
<input type="radio" name="car_type" id="Mercedes" />

No additional Javascript would be necessary to get the desired behavior.

Hope this helps offer some additional explanation!

Edit: Not sure what you are trying to do, but you can extract the value by simply iterating over the radio elements in Javascript:

var r = document.getElementsByName('car_type');
for (var i = 0, i < r.length; i++) {
    if (r[i].checked) {
        // insert code to use the checked value
        alert(r[i].value);
        break;
    }
}