Deselect the radio button if another one is selected.

Question

Given the following markup:

<form> <div class="project"> <ul class="choice"> <li><label for="firstchoice_1">First choice</label><input type="radio" name="firstchoice" value="1" id="firstchoice_1" /></li> <li><label for="secondchoice_1">Second choice</label><input type="radio" name="secondchoice" value="1" id="secondchoice_1" /></li> </ul> </div> <div class="project"> <ul class="choice"> <li><label for="firstchoice_2">First choice</label><input type="radio" name="firstchoice" value="2" id="firstchoice_2" /></li> <li><label for="secondchoice_2">Second choice</label><input type="radio" name="secondchoice" value="2" id="secondchoice_2" /></li> </ul> </div> </form> 

What I want to do is turn it off if there is a switch in each .project group whenever a different one has been selected (therefore, you can only select First choice or Second choice in each group). I know how to do this - to disable one specific switch in one specific case, but I do not know how to generalize it, since they can be hundreds of such .project groups.

Change Please note that only the entire First choice (and vice versa) can be selected. The same name is already used for this. The same name attribute is used throughout the markup. There are only two different name s.

Answer 1

Just give them the same name but different value s; this will happen automatically, as this is how the radio buttons are created.

Answer 2

If you pass the same name to the set of radio buttons, they automatically check / uncheck the box when you click on them. But the identifiers must be unique for each of the switches that do not have markup. Take a look at this working demo, I hope this is what you are looking for.

Job demonstration

Answer 3

You must listen for the change event on all switches. When any of them changes, you check whether it will be checked. If this happens, then you uncheck all the other radio buttons within the .project :

 $('input[type=radio]').change(function() { if (this.checked) { $(this).closest('.project') .find('input[type=radio]').not(this) .prop('checked', false); } }); 

Answer 4

You just need to use the same name for all buttons in the group. Then the browser automatically shuts down.

Answer 5

  $(function(){ if($(this).attr('checked')==true) { $('.project').not(this).attr('checked',false); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <form> <div class="project"> <ul class="choice"> <li><label for="firstchoice_1">First choice</label><input type="radio" name="firstchoice" value="1" id="firstchoice_1" /></li> <li><label for="secondchoice_1">Second choice</label><input type="radio" name="secondchoice" value="1" id="secondchoice_1" /></li> </ul> </div> <div class="project"> <ul class="choice"> <li><label for="firstchoice_2">First choice</label><input type="radio" name="firstchoice" value="2" id="firstchoice_2" /></li> <li><label for="secondchoice_2">Second choice</label><input type="radio" name="secondchoice" value="2" id="secondchoice_2" /></li> </ul> </div> </form> 

Or, if you use the same name for multiple items, you can select one of them.

Answer 6

You just need to use the same name for all buttons in the group. Then the browser automatically shuts down.

u can change the identifier for different values ​​if u wants