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

Checkbox uncheck if other checkbox is selected

本文关键字：复选框 取消 其他 如果      更新时间：2023-09-26

我有许多城市输入复选框。我已将第一个复选框命名为"全部"；如果用户选择该复选框，则只选中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>

等等…

试试这个

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

演示

更新：（问题澄清后）

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

演示

更新：（2012年7月23日）

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

更新的演示

你可以这样做，

实时演示

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

注意：为了将其他和所有城市从城市中分离出来，给它们取不同的名字
​

Darin是对的-尽管有人给你一些关于如何解决这个问题的提示是个好主意。如果我读对了这个问题，你唯一想要的动态行为就是当有人勾选一个不是"全部"的框时；在这种情况下，您希望取消选中"全部"框。

好的，所以你需要把这个问题分解成几个部分。我会这么做：

  • 为所有非"全部"控件附加一个函数。我会用类选择器来做这件事，但同样你也可以用"不命名"的方法（根据Yograj Gupta的回答）
  • 在事件处理程序中，有一个if语句，该语句仅在发现控件被勾选时运行（即，如果选择了"All"，并且您取消勾选一个城市，则不会发生任何事情）
  • 如果运行if语句，请取消选中"All"控件

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

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

尽管在寻求帮助之前应该先实现自己的代码，但我认为帮助那些不知道如何开始做某事的人是公平的。所以，我做了这个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)                      
     })

​

尝试这个

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

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

相关文章：