javascript - How to uncheck all checkboxes except the one using jQuery? - Stack Overflow

admin管理员组

文章数量:1287583

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 /

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?

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/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?

• javascript
• jquery
• html
• checkbox

Share Improve this question Follow edited Dec 31, 2015 at 16:19 Junior asked Dec 30, 2015 at 0:50 JuniorJunior 12k3232 gold badges120120 silver badges223223 bronze badges 2

• @MikeA I think this is what you want? jsfiddle/8yf0v3xt/14 – ketan Commented Dec 30, 2015 at 5:40
• @ketan that just prevent the click on anycheck box that has the skipper itemtype. – Junior Commented Dec 30, 2015 at 15:53

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 11

Hope this would work 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

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();

CONCLUSION

Few points I noticed wrong in your code are as follows.

1. You were using $(this).attr("checked",false); to uncheck all checkboxes which is wrong. $(this) points to CURRENT SINGLE ELEMENT only, not all.

2. You were using .attr("checked",false) which is also incorrect, it should be either .attr("checked","checked") or .prop("checked",true).

本文标签： javascriptHow to uncheck all checkboxes except the one using jQueryStack Overflow