Question

我有一个包含多个复选框组的表单。

每个复选框选项都有一个名为itemtype的自定义html 5属性。当输入type =＆＃34;复选框＆＃34;更改，我需要评估刚刚选中的复选框。如果它的值data-itemtype等于＆＃39;船长＆＃39;，我想取消选中属于同一群组的所有其他复选框。

换句话说，假设我有多个复选框，其中一个复选框选项有一个名为＆＃34;无＆＃34;的标签，如果用户检查＆＃34;无＆＃34;，则不应选择任何内容但是＆＃34;无＆＃34 ;.我不能在这里使用单选按钮，因为我希望用户能够检查多个选项，如果＆＃34;无＆＃34;没有被选中。

以下是我的代码细分

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>

我创建了一个小提琴，向您展示我所做的以及整个表格https://jsfiddle.net/8yf0v3xt/13/

我试图做这样的事情，但是没有用

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

如果＆＃34;无＆＃34;我可以做什么来取消所有选项。被选中了？

Answer 1

希望这对你有用

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

<强>更新

<强> WORKING FIDDLE

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

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

<强>结论

我发现您的代码错误的几点如下。

您正在使用$(this).attr("checked",false);取消选中所有内容复选框哪个错了。 $(this)指向 CURRENT SINGLE 只有ELEMENT ，而不是全部。
您使用的.attr("checked",false)也是错误的应该是.attr("checked","checked")或。{ .prop("checked",true)。

如何取消选中除使用jQuery之外的所有复选框？

1 个答案: