0

我有很多城市输入复选框。我给第一个复选框命名为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>

等等....

4

6 回答 6

3

试试这个

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

演示。

更新：(23-07-2012)

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

更新演示。

于 2012-07-15T18:16:39.813 回答
2

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

好的，所以您需要将问题分解为多个部分。这是我要做的：

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

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

附录：另外 - 以及一般论坛问题的一个很好的提示 - 如果您找到答案可以满足您的要求的 80%，请尝试自己实现另外 20%。我同意这并不总是可能的，因为有时每个人都必须寻求帮助，但从长远来看，这是一种很好的做法，你会发现有助于学习过程。

于 2012-07-15T18:31:18.777 回答
2

你可以这样做，

现场演示

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

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

于 2012-07-15T18:31:33.220 回答
0

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

     })

​</p>

于 2012-07-15T18:16:24.340 回答
0

试试这个

$('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);
    }
});
于 2012-07-15T18:16:44.597 回答
0

我会把我的扔在这里

$(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的示例中的元素设置不正确，我已for在 HTML 中正确设置了属性。

于 2012-07-15T18:28:55.840 回答