jQuery取消选中复选框不起作用答案

【问题标题】：jQuery Uncheck checkbox not workingjQuery取消选中复选框不起作用
【发布时间】：2012-06-16 19:33:41
【问题描述】：

在 StackOverflow 上尝试了多个示例来解决我的问题后，我仍然无法弄清楚我的问题。

我有 3 个复选框：

<input id="pets_dog" class="text" type="checkbox" class="pets" name="pets[]" value="pets_dog"> Dogs</input>
<input id="pets_cats" class="text" type="checkbox" class="pets" name="pets[]" value="pets_cats"> Cats</input>
<input id="pets_none" class="text" type="checkbox" class="pets" name="pets[]" value="pets_no"> None</input>

当“pets_none”被选中时，我需要取消选中其他 2 个复选框，反之亦然。这是我当前的 jQuery 代码：

        $("#pets_none").change(function() {
            if($("#pets_none").attr('checked')) {
            $("#pets_cats").removeAttr('checked');
            $("#pets_dogs").removeAttr('checked');
            } 
        });

我一生都无法弄清楚为什么它不起作用，并感谢任何帮助。

【问题讨论】：

您不应分配 2 个类属性，因为这是无效的 Html。例如，拥有 2 个类属性还会阻止您按 pets 类选择您的输入。即：$(.pets) 将不起作用，因为 .text 优先。如果你想分配 2 个班级，请这样做 class="text pets"

标签： javascript jquery html checkbox

【解决方案1】：

你的 html 应该是

<input id="pets_dog" class="text pets" type="checkbox" name="pets[]" value="pets_dog" /> Dogs
<input id="pets_cats" class="text pets" type="checkbox" name="pets[]" value="pets_cats" /> Cats
<input id="pets_none" class="text pets" type="checkbox" name="pets[]" value="pets_no" /> None

$(function(){
   $("#pets_none").on('change', function(e) {
       if($(this).is(':checked')) {
           $("#pets_dog").attr('checked', false);
           $("#pets_cats").attr('checked', false);
       } 
   });
});

DEMO.

更新： 你已经使用了两次class属性，应该如下

<input id="pets_dog" type="checkbox" class="pets text" name="pets[]" value="pets_dog" /> Dogs
<input id="pets_cats" type="checkbox" class="pets text" name="pets[]" value="pets_cats" /> Cats
<input id="pets_none" type="checkbox" class="text pets" name="pets[]" value="pets_no" /> None

$(function(){
    $(".pets").on('change', function(e) {
        var el=$(this);
        if(el.is(':checked') && el.attr('id')=='pets_none') {
            $(".pets").not(el).attr('checked', false);
        }
        else if(el.is(':checked') && el.attr('id')!='pets_none')
        {
            $("#pets_none").attr('checked', false);
        }  
    });
});

DEMO.

【讨论】：

@FrançoisWahl 考虑到我是否可以让第一个块工作，我没有费心包含“else”块，而不是编辑“else”不是问题。
@SheikhHeera 非常感谢您的更新。这正是我所需要的，并允许我剪掉 8 行代码。我非常感谢演示链接。

【解决方案2】：

您可以使用prop 方法：

 $("#pets_none").change(function() {
     if (this.checked) {
        $("#pets_cats, #pets_dog").prop('checked', false);
     } 
 });

【讨论】：

【解决方案3】：

使用.prop() 方法：

...

$("#pets_cats").prop('checked', false);
$("#pets_dogs").prop('checked', false);

...

要检查是否检查了#pets_none，也可以使用该方法：

$("#pets_none").prop('checked');

【讨论】：

我已经尝试过了，但仍然无济于事。在这一点上，我认为另一个功能可能会破坏此功能。

【解决方案4】：

var checked = $(this).find('Enable').text().toLowerCase();
$("#chk__Enable").each(function () {
    if (checked == 'true') {
        $(this).attr('checked', 'checked');
    } else {
        $(this).removeAttr('checked');
    }
});

【讨论】：

我知道 prop 是使用较新版本的 jQuery 的方法。但是，当 prop 没有（特别是 IE9）时，这个答案对我有用。使用 attr / removeAttr 适用于我的应用程序的 IE9 和 IE10 渲染。