Thursday, May 23, 2024
 Popular · Latest · Hot · Upcoming
162
rated 0 times [  164] [ 2]  / answers: 1 / hits: 25121  / 10 Years ago, thu, january 1, 2015, 12:00:00

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>

More From » html

 Answers
73

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


[#68335] Monday, December 29, 2014, 10 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
adilene

Total Points: 395
Total Questions: 88
Total Answers: 109

Location: Indonesia
Member since Tue, Aug 3, 2021
3 Years ago
;