复选框与选项“全部”，但以不同的方式

Question

我有一个复选框列表，其中一人说：“所有”，但这里的区别是，我并不需要选择所有的复选框，当“所有”复选框被选中，我实际上需要它们被取消选择。

听起来有些不可思议，但是这就是我需要它。

让我解释什么，我需要：

好吧，复选框列表中我提到。 “全部”复选框默认为选中状态，一旦我选中其他复选框（因为其他复选框实际上是特定主题），应该取消选中该复选框。

这里是扭曲的：如果用户一个接一个地选择所有其他复选框......就像他试图全部选中它们一样，那么当用户点击最后一个复选框选中它时，它实际上会使所有选定的复选框取消选中，但“全部”复选框被选中。

这有道理吗？

这里是我的起点HTML：

<label> 
    <input type="checkbox" name="rb" value="all" id="all" checked> 
    All</label> 
<label> 
    <input type="checkbox" name="rb" value="ln" id="ln"> 
    Option 1</label> 
<label> 
    <input type="checkbox" name="rb" value="prodsandserv" id="prodsandserv"> 
    Option 2</label> 
<label> 
    <input type="checkbox" name="rb" value="publications" id="publications"> 
    Option 3</label> 
<label> 
    <input type="checkbox" name="rb" value="comm" id="comm"> 
    Option 4</label> 

这里是万一DEMO你想与它合作。

任何帮助，不胜感激。

谢谢。

Answer 1

好吧，我想出了fearofawhackplane的和马立克氏答案之间的混合答案。

默认情况下，所有复选框都会被选中，当然'全部'也是。 '全部'检查/取消选中所有复选框...我从最初的计划中改变了这两个想法，更有意义，但是:)。

当所有其他复选框一个接一个被选中/取消选中时，fearofawhackplane的解决方案会检查'全部'复选框;和马立克的解决方案，检查/取消选中所有复选框，尽管我对他的代码进行了小小的编辑。

这是最终的jQuery脚本 - 这可以缩短它吗？ O_O：

$('#container :checkbox').change(function() { 
    $('#all').attr('checked', !$('#container :checkbox:not(:checked)').length); 
}); 


$('#all').change(function() { 
    if ($('#all').attr('checked')) { 
    $('input[type=checkbox][id!=all]').attr('checked', 'checked'); 
    } else { 
    $('input[type=checkbox][id!=all]').attr('checked', ''); 
    } 
}); 

和HTML是一个由fearofawhackplane也提出了小的修改：

<label> 
    <input type="checkbox" name="rb" value="all" id="all" checked> 
All</label> 
<div id="container"> 
    <label> 
    <input type="checkbox" name="rb" value="ln" id="ln" checked> 
    Option 1</label> 
    <label> 
    <input type="checkbox" name="rb" value="prodsandserv" id="prodsandserv" checked> 
    Option 2</label> 
    <label> 
    <input type="checkbox" name="rb" value="publications" id="publications" checked> 
    Option 3</label> 
    <label> 
    <input type="checkbox" name="rb" value="comm" id="comm" checked> 
    Option 4</label> 
</div> 

这里的最终功能DEMO。

感谢大家。

Answer 2

$("input").click(function() { 

    var $this = $(this); 
    if($this.is("[value=all]")) { 
     var otherItems = $("input[type=checkbox][value!=all]"); 
     if ($this.is(":checked")) { 
      otherItems.attr("checked", "").attr("disabled", "disabled") 
     } else { 
      otherItems.attr("disabled", ""); 
     } 
    } 

}); 

Answer 3

以下的javascript 检查所有和 检查单复选框

function checkall() 
{ 
    for(intCounter=0; intCounter<(document.getElementsByName('chkBox').length); intCounter++) 
    { 
     document.getElementsByName("chkBox")[intCounter].checked = document.getElementById("chkAll").checked; 
    } 
} 

function checkManual() 
{ 
    var intCheckVal; 
    intCheckVal = 1; 
    for(intCounter=0; intCounter<(document.getElementsByName('chkBox').length); intCounter++) 
    { 
     if(document.getElementsByName("chkBox")[intCounter].checked == false) 
      intCheckVal = 0; 
    } 
    if(intCheckVal == 1) 
     document.getElementById("chkAll").checked = true; 
    else 
     document.getElementById("chkAll").checked = false; 
} 

然后在检查

使用所有复选框onclick="checkall();“ 而在检查单个复选框onclick="checkmanual();"

Answer 4

尝试类似this。

我把“不是所有的”复选框在一个容器DIV，然后用

$('#container :checkbox').change(function() { 
    if ($('#container :checkbox:not(:checked)').length > 0) { 
     $('#all').attr('checked', false); 
    } 
    else { 
     $('#all').attr('checked', true); 
    } 
}); 

从而可以更简明地写（但少了几分可读）作为

$('#container :checkbox').change(function() { 
    $('#all').attr('checked', !$('#container :checkbox:not(:checked)').length); 
}); 

Answer 5

使用此代码：

$('#all').change(function(){ 
    if ($('#all').attr('checked')) { 
     $('input[type=checkbox][id!=all]').attr('checked', ''); 
    } else { 
     $('input[type=checkbox][id!=all]').attr('checked', 'checked'); 
    } 
}); 

记住的jQuery添加到您的脚本：

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js'></script> 

Answer 6

这个工程使用您的演示：

<script type="text/javascript"> 
    var allId = 'all'; 

    function getCheckboxes() { 
     return document.getElementById('checkboxes').getElementsByTagName('input'); 
    } 

    function clearCheckboxes() {  
     var checkboxes = getCheckboxes(); 
     for(var i=0; i<checkboxes.length; i++) { 
      if (checkboxes[i].id != allId) { 
       checkboxes[i].checked = false; 
      } 
     } 
    } 

    function setCheckboxes() {   
     var allCheckbox = document.getElementById(allId); 
     var checkboxes = getCheckboxes(); 
     var allChecked = true; 
     for(var i=0; i<checkboxes.length; i++) { 
      if (checkboxes[i].id != allId) { 
       if (!checkboxes[i].checked) { 
        allChecked = false; 
       } 
      } 
     } 
     if (!allChecked) { 
      allCheckbox.checked = false; 
     } 
     else { 
      allCheckbox.checked = true; 
      clearCheckboxes(); 
     } 
    } 
</script> 
<div id="checkboxes"> 
<label> 
    <input onclick="clearCheckboxes();" type="checkbox" name="rb" value="all" id="all" checked> 
    All</label> 
<label> 
    <input onclick="setCheckboxes();" type="checkbox" name="rb" value="ln" id="ln"> 
    Option 1</label> 
<label> 
    <input onclick="setCheckboxes();" type="checkbox" name="rb" value="prodsandserv" id="prodsandserv"> 
    Option 2</label> 
<label> 
    <input onclick="setCheckboxes();" type="checkbox" name="rb" value="publications" id="publications"> 
    Option 3</label> 
<label> 
    <input onclick="setCheckboxes();" type="checkbox" name="rb" value="comm" id="comm"> 
    Option 4</label> 
</div> 

Answer 7

首先，为什么你的问题与反向逻辑上的“全部”复选框复杂化？在你的问题中将它称为“无”，并在实际实现中将标签更改为“全部”。

以下是您需要的组件。

将一个类添加到您的复选框。不是没有一个。我们称之为“foo”。 <input type="checkbox" name="rb" value="ln" class="foo" id="ln">

将一个函数放入jquery onload部分，执行“none”操作。

$("#none").click(function()(source) 
{ 
    i=($(source).attr("checked")) == "checked" ? "" : "checked"; 
    $(":checkbox.foo").attr("checked",i); 
}; 

将一个函数在您的jQuery的onload节设置无箱每当另一个按钮被点击

$(":checkbox.foo").click(function() 
{ 
    noneVal = "checked"; 
    $(":checkbox.foo").each(function (index) { 
     if ($(this).attr("checked") == "checked") 
     { 
      noneVal = ""; 
      break; 
     } 
    }) 
    $('#none').attr("checked",noneVal); 
});