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

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

每个复选框选项都有一个名为

itemtype

的自定义HTML5属性。当type=“checkbox”的输入更改时，我需要评估刚刚选中的复选框。如果它的

数据项类型

的值等于'Skipper'，我想取消选中属于同一组的所有其他复选框

换句话说，假设我有多个复选框，其中一个复选框选项有一个名为“None”的标签，如果用户选中“None”，则除了“None”之外，不应选择任何内容。我不能在这里使用单选按钮，因为如果未选择“无”，我希望用户能够选中多个选项

这是我的代码的分解

复选框组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).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();

更新

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

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

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

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

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

}
}).change();

$(: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）取消选中全部
选择错误的复选框<代码>$（此）

指向当前单条 仅元素，而不是全部

您使用的是

.attr（“checked”，false）

，这也是不正确的 应为

.attr（“已检查”、“已检查”）

或

.prop（“选中”，为真）

---

@MikeA我想这就是你想要的@ketan只是阻止单击具有skipper itemtype的任何复选框。这是如何在其组的上下文中放置任何复选框的？这不会对页面上的所有复选框都起作用吗？我已经用fiddle更新了代码。我们可以筛选所需的复选框。当您在任何字段集中选中skipper时，无论是否在同一字段集中，它都会清除页面上的任何复选框。这是预定的手术吗？是的，这就是我说的。需要使用父字段集作为上下文来执行复选框操作。我想你明白了！我们看看OP怎么想…：-）@非常感谢你。小提琴2是我要找的。然而，我需要改变的一件事是，当一些人在选择“无”之后选择了一个选项。任何一个都不应被取消检查。