Javascript 复选框如果选中了其他复选框，则取消选中

我有许多城市输入复选框。我给第一个复选框命名为All；如果用户选择该复选框，则只选中All复选框，而不选中其他城市复选框

如果用户选中任何其他城市，则应自动取消选中All复选框。我想用JavaScript或jQuery来实现这一点

<input type="checkbox" name="city_pref[]" id="city_all" value="0" checked /><label for="city_all">All</label>
<input type="checkbox" name="city_pref[]" id="city_pref_1" value="Chicago" /><label for="city_pref_1">Chicago</label>
<input type="checkbox" name="city_pref[]" id="city_pref_2" value="Texas" /><label for="city_pref_2">Texas</label>

全部
芝加哥
得克萨斯州

---

诸如此类……

尽管在寻求帮助之前，您应该先尝试实现自己的代码，但我认为帮助那些不知道如何开始做某事的人是公平的。所以，我做了这个

全部
伦敦
罗马
东京
$（'.all'）。单击（函数（）{
$（'input[name=city]'）.attr（“选中”，为真）
})
$（'.city'）。单击（函数（）{
$（'input[type=checkbox]'）.attr（“checked”，false）
$（this.attr（“选中”，true）
})

​

试试这个

​$(function(){
    var el=$('input:checkbox[name="city_pref[]"]');
    el.on('change', function(e){
        if($(this).is(':checked')) el.not($(this)).prop('checked', false);
    });
});​

更新：（问题澄清后）

更新：（23-07-2012）

我想要该功能，当未选中任何复选框时，将自动选中所有复选框

试试这个

$('input:checkbox[name^=city_pref]').click(function(){
    if(this.id =="city_all"){
        $(this).siblings("input:checkbox").attr('checked',false);
    }
    else{
        $('#city_all').attr('checked',false);
    }
});

---

我把我的扔在这里

$(function () {
    $('.checkbox-all .all').attr('disabled', true); //comment out if you want them to be able to toggle the all checkbox, but their input would be overwritten so I just disable it.

    $('.checkbox-all input[type="checkbox"]').change (function () {
        var numSelected = $(this).parent().children(':checked:not(.all)').length;
        $(this).siblings('.all').attr('checked', (numSelected == 0));
    });
});

使用HTML：

<div class="checkbox-all">
    <input class="all" type="checkbox" name="city_pref[]" id="city_all" value="0" checked /> <label for="city_all">All</label><br/>
    <input type="checkbox" name="city_pref[]" id="city_pref_1" value="Chicago" /> <label for="city_pref_1">Chicago</label><br/>
    <input type="checkbox" name="city_pref[]" id="city_pref_2" value="Texas" /> <label for="city_pref_2">Texas</label>
</div>

全部

芝加哥

得克萨斯州

---

仅供参考，您的

标签

元素设置不正确。在您的示例中，我在我的HTML中正确设置了

属性。
Darin是对的-尽管有人给您一些解决此问题的提示是个好主意。如果我没看错的话，你想要的唯一动态行为就是有人勾选一个不是“全部”的方框；在这种情况下，您需要取消选中“全部”框

好的，所以你需要把问题分解成几个部分。下面是我要做的：


将功能附加到并非“全部”的所有控件。我会用一个类选择器来实现这一点，但同样地，你也可以用“不命名”的方法（按照Yograj Gupta的回答）
在事件处理程序中，有一个
if
语句，该语句仅在控件被勾选时运行（即，如果选择了“All”，并且取消勾选城市，则不会发生任何事情）
如果
If
语句运行，请取消选中“All”控件

现在，这些项目中的每一项都足够小，可以查阅jQuery文档。在这种情况下，您当然有一些现成的解决方案，但是如果您想作为一名程序员自我改进，那么分解问题的方法是非常重要的

附录：另外——这是一个很好的论坛问题提示——如果你发现一个答案能让你达到80%的要求，那么试着自己实现另外20%。我同意这并不总是可能的，因为每个人有时都需要寻求帮助，但从长远来看，你会发现学习过程中有帮助，这是一种很好的做法。
你可以这样做


$('#city_all').change(function(){   
    if($(this).is(':checked'))
       $('input:checkbox[name^=city_pref]').attr('checked','checked'); 
    else
        $('input:checkbox[name^=city_pref]').removeAttr('checked'); 
});

$('input:checkbox[name^=city_pref]').change(function(){    
    if($('input:checkbox[name^=city_pref]').not(':checked').length > 0)
        $('#city_all').removeAttr('checked'); 
    else
        $('#city_all').attr('checked','checked'); 
});

注意：要将其他城市和所有城市分开，请给它们不同的名称。

​
 到目前为止你都尝试了什么？我很抱歉，但是我在谷歌上搜索了类似的解决方案，但是没有找到。有时候有些东西你在谷歌上找不到。要么是因为您没有正确搜索，要么是因为还没有人实现它们。在这种情况下，您可以尝试自己实现它。我问的是关于这个实现的问题。为了解决这个问题，您已经编写了什么代码？您在使用此代码时遇到了什么困难？因为在堆栈溢出问题上，如果您表现出一些努力，而不仅仅是要求某人给您代码，我们将非常乐意为您提供帮助，这就是我目前对您问题的解释。@mazzzz-我认为是第一种情况。虽然我倾向于支持“what have you trusted”（你尝试过什么）这一模因，但最近我突然想到，将问题分解成组件，并知道搜索什么，比我们通常认为的要重要得多。@halfer当然，这在你做了几次之后就很简单了。jQuery（imo）的思维方式与其他语言不同（我从PHP学习jQuery很有趣）。但是当你把你的头脑集中在这个范例上之后，用谷歌搜索就变得更容易了。哎呀，我想，我没有澄清。我希望复选框是多选的，除了“全部”中的情况，+1是一个非常有用的答案，尽管我个人认为您可能已经将澄清“作为读者的练习”
：）
嗨，Sheikh，在您最近的小提琴中，您能帮我做一件事吗？我想要功能，当没有选中复选框时，然后将自动选择所有。谢谢
<div class="checkbox-all">
    <input class="all" type="checkbox" name="city_pref[]" id="city_all" value="0" checked /> <label for="city_all">All</label><br/>
    <input type="checkbox" name="city_pref[]" id="city_pref_1" value="Chicago" /> <label for="city_pref_1">Chicago</label><br/>
    <input type="checkbox" name="city_pref[]" id="city_pref_2" value="Texas" /> <label for="city_pref_2">Texas</label>
</div>

$('#city_all').change(function(){   
    if($(this).is(':checked'))
       $('input:checkbox[name^=city_pref]').attr('checked','checked'); 
    else
        $('input:checkbox[name^=city_pref]').removeAttr('checked'); 
});

$('input:checkbox[name^=city_pref]').change(function(){    
    if($('input:checkbox[name^=city_pref]').not(':checked').length > 0)
        $('#city_all').removeAttr('checked'); 
    else
        $('#city_all').attr('checked','checked'); 
});