Javascript shortcut deselects others when one radio button is selected?
I have two buttons to select vehicles. There are only two options, either you can choose a BMW car or you can choose a Mercedes car.
Here is my html code for that:
<label>Please specify car:</label>
<label>BMW</label>
<input type="radio" name="is_BMW" id="is_BMW" onchange="valueChanged()" />
<label>Mercedes</label>
<input type="radio" name="is_Mercedes" id="is_Mercedes" onchange="valueChanged()" />
The javascript function for this event is valueChanged (), and it's pretty 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 am getting is this: whenever I press the BMW switch, it locks in and I cannot upgrade to Mercedes.
If I first click on the Mercedes radio, then I can switch to BMW, but again, once I choose BMW, I can no longer switch to Mercedes and that will fix it.
Is there something wrong with my Javascript? As my knowledge of Javascript tells me that I am not wrong with my Javascript code. Is this something else? Should I be using jQuery to solve this problem?
Edit-1 : I'm sorry I forgot to mention one important point - I need to pass a value in exchange for a switch. I am especially sorry for one person who answered my question instantly, I should have mentioned this before, my bad one.
Hence my actual Javascript could 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>
source to share
I will change my answer to suit your requirements.
In HTML, provide the same name for both radio buttons. This will take care of select and deselect .
<label>Please specify car:</label>
<label>BMW</label>
<input type="radio" name="car" id="is_BMW" />
<label>Mercedes</label>
<input type="radio" name="car" id="is_Mercedes" />
And add logic for changing the value in js as shown below:
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 parameter specifies which radio button group the field belongs to. When you select one button, all other buttons in the same group are not selected.
source to share
A radio button is different from a check box because you can only select one item at a time. But for this to work, the radio buttons must be grouped together.
This is done by specifying items input
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 is required to get the desired behavior.
Hope this helps to suggest further explanation!
Edit: Not sure what you are trying to do, but you can extract the value by simply iterating over the radioelements 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;
}
}
source to share