How to uncheck all but one checkbox using jQuery?

Question

I have a form that has several groups of checkboxes.

Each flag option has its own html 5 attribute called itemtype . When input of type = "checkbox" is changed, I need to evaluate the checkbox that has just been selected. If the value of it data-itemtype is “Skipper”, I want to uncheck the boxes of all the others belonging to the same group.

In other words, suppose I have several checkboxes, and one of the checkbox options has a label of “No”, if the user checks “No”, nothing should be selected except “No”. I cannot use the switch here, as I want the user to be able to check several parameters if "None" is not selected.

Here is a breakdown of my code

CHECKBOX 1 GROUP

 <input name="control_307[0][307:1003]" id="item_307_1003_0" value="307:1003" data-itemtype="Answer" type="checkbox"> Zulauf Ltd<br> <input name="control_307[0][307:361]" id="item_307_361_0" value="307:361" data-itemtype="Answer" type="checkbox"> Ziemann, McLaughlin and Kohler <input name="control_307[0][308:1013]" id="item_307_1013_0" value="308:1013" data-itemtype="Skipper" type="checkbox"> None<br> 

CHECKBOX 2 GROUP

 <input name="control_1000[0][1000:999]" id="item_1000_999_0" value="307:1003" data-itemtype="Answer" type="checkbox"> First Options<br> <input name="control_1000[0][1000:666]" id="item_1000_666_0" value="1000:666" data-itemtype="Answer" type="checkbox"> Some other option <input name="control_1000[0][1000"123]" id="item_1000_123_0" value="308:1013" data-itemtype="Skipper" type="checkbox"> None<br> 

I created a fiddle to show you what I did with the whole form https://jsfiddle.net/8yf0v3xt/13/

I tried to do something like this, but it doesn't work

 $(:checkbox).change(function(){ var skipper = $("input:checkbox[data-itemtype='Skipper']"); if( skipper.is(":checked")){ $(this).attr('checked', false); //uncheck all the boxes for the current group skipper.attr('checked', true); //re-check the box that caused everything to uncheck } }).change(); 

What can I do to cancel all options if "No" is selected?

Answer 1

Hope this works for you.

 $(:checkbox).change(function(){ var skipper = $("input:checkbox[data-itemtype='Skipper']"); if( skipper.is(":checked")){ //$(":checkbox").attr('checked', false); //uncheck all the boxes for the current group //skipper.attr('checked', true); //re-check the box that caused everything to uncheck $(":checkbox").not(skipper).prop("checked",false);//THIS IS IMPORTANT } }).change(); 

UPDATE

WORKING FIDDLE

UPDATE 2

WORK FIDDLE 2

  $(:checkbox).change(function(){ var skipper = $("input:checkbox[data-itemtype='Skipper']"); if( skipper.is(":checked")){ //$(":checkbox").attr('checked', false); //uncheck all the boxes for the current group //skipper.attr('checked', true); //re-check the box that caused everything to uncheck //$(":checkbox").not(skipper).prop("checked",false);//THIS IS IMPORTANT //THIS IS IMPORTANT $(this).closest(".survey-control-fieldset").find(":checkbox").not(skipper).prop("checked",false); } }).change(); 

UPDATE 3

WORK FIDDLE 3

 $(:checkbox).change(function(){ var skipper = $("input:checkbox[data-itemtype='Skipper']"); if( skipper.is(":checked")){ //$(":checkbox").attr('checked', false); //uncheck all the boxes for the current group //skipper.attr('checked', true); //re-check the box that caused everything to uncheck //$(":checkbox").not(skipper).prop("checked",false);//THIS IS IMPORTANT //THIS IS IMPORTANT $(this).closest(".survey-control-fieldset").find(":checkbox").not(skipper).prop("checked",false); } else { $(this).closest(".survey-control-fieldset").find(":checkbox[data-itemtype='Skipper']").prop("checked",false); } }).change(); 

Conclusion

A few points that I noticed incorrectly in your code are as follows.

• You used $(this).attr("checked",false); to uncheck the wrong checkboxes. $(this) indicates the CURRENT ONE ELEMENT only , not all.

• You used .attr("checked",false) , which is also incorrect, it must be either .attr("checked","checked") or .prop("checked",true) .