Question

我有很多城市输入复选框。我给了第一个复选框名称全部;如果用户选择该选项，则仅选中全部复选框，而不选中其他城市复选框。

如果用户选中其他任何城市，则应自动取消选中全部复选框。我想用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>

依旧......

Answer 1

试试这个

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

DEMO.

更新：（在澄清问题之后）

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

DEMO.

<强>更新：（23-07-2012）

I want the functionality, when no checkbox is selected, then All will get selected automatically

Updated Demo.

Answer 2

Darin是对的 - 虽然有人给你一些关于如何来解决这个问题的建议是个好主意。如果我正确地阅读了这个问题，你想要的唯一动态行为就是有人勾选一个不是＆＃34; All＆＃34 ;;在这种情况下，你想要＆＃34; All＆＃34;盒子没有了。

好的，所以你需要将问题分解成碎片。这就是我要做的事情：

将功能附加到不是＆＃34;全部＆＃34;的所有控件。我用类选择器来做这件事，但同样你可以做＆＃34;而不是名字＆＃34;方法（根据Yograj Gupta的回答）
在事件处理程序中，有一个if语句，只有在发现控件被勾选时才会运行（即，如果＆＃34;所有＆＃34;被选中而你取消一个城市，没有任何反应。）
如果if语句运行，请取消选中＆＃34;全部＆＃34;控制

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

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

Answer 3

你可以这样做，

<强> Live Demo

$('#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'); 
});

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

Answer 4

即使您在寻求帮助之前首先尝试实施自己的代码，我认为可以帮助那些不知道如何开始做某事的人。所以，我做了这个JSFiddle

<input type="checkbox" class="all">all</input>
<input type="checkbox" name="city" class="london city">london</input>
<input type="checkbox" name="city" class="rome city">rome</input>
<input type="checkbox" name="city" class="tokio city">tokio</input>


 $('.all').click(function(){

 $('input[name=city]').attr("checked", true)

     })

     $('.city').click(function(){

         $('input[type=checkbox]').attr("checked", false)


         $(this).attr("checked", true)                      

     })

Answer 5

试试这个

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

Answer 6

我会把我扔在这里

$(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>

仅供参考，您的label元素在您的示例中设置不正确，我在HTML中正确设置了for个属性。

复选框取消选中是否选中其他复选框

6 个答案: