Mike A Mike A - 4 years ago 169
Javascript Question

How to uncheck all checkboxes except the one using jQuery?

I have a form that has multiple checkbox groups.

Each checkbox option has a custom html 5 attribute called

itemtype
. When the input of type="checkbox" changes, I need to evaluate the checkbox that was just selected. If the value of it's
data-itemtype
is equal to 'Skipper', I want to uncheck all other checkboxes that belong to the same group.

In other words, assume that I have multiple checkboxes and one of the checkbox options has a label called "None", if the user checks "None", Nothing should be selected but "None". I can't use a radio button here as I want the user to be able to check multiple options if "None" is not selected.

Here is a break down of my code

CHECKBOX GROUP 1

<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 GROUP 2

<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 have create a fiddle to show you what I have done along with the entire form https://jsfiddle.net/8yf0v3xt/13/

I tried to do something like this but is is not working

$(: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 unckecl all the option if "None" is selected?

Answer Source

Is this correct?

$(: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

WORKING 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

WORKING 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();
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download