Jquery 带有选项“全部”的复选框，但方式不同

我有一个复选框列表，其中一个表示全部，但这里的区别是，当选中全部复选框时，我不需要选中所有复选框，实际上我需要取消选中它们

听起来很奇怪，但这正是我需要它的原因

让我详细说明我需要什么：

好的，我提到的复选框列表。默认情况下，“全部”复选框处于选中状态，当我选中任何其他复选框时，应取消选中该复选框，因为其他复选框实际上是特定的主题

这里有一个转折点：如果用户逐个选择所有其他复选框。。。比如，如果他试图全部选中，那么当用户单击最后一个复选框选中它时，实际上会取消选中所有选中的复选框，但选中全部复选框

这有意义吗

以下是我的起始HTML：

这是一个你想用它工作的案例

非常感谢您的帮助

---

谢谢。

使用以下javascript检查所有复选框和单个复选框

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

});

然后，选中所有复选框onclick=checkall； 并在选中单个复选框时onclick=checkmanual

试试类似的方法

我将“notall”复选框放在container 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);
});

使用此代码：

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

---

这可以使用您的演示：

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

---

首先，为什么要用All复选框上的反向逻辑使问题复杂化？只需在问题中称之为None，并在实际实现中将标签更改为All

这是您需要的组件

将类添加到复选框中。不是无名小卒。我们叫它福吧

在jquery onload部分中放置一个执行none操作的函数

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

在jquery onload部分中放置一个函数，该函数在单击其他按钮时设置None框

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

---

好吧，我想出了一个混合答案，介于恐惧号飞机和马瑞克的答案之间

默认情况下，所有复选框都处于选中状态，当然“All”也处于选中状态。“全部”选中/取消选中所有复选框。。。我从最初的计划中改变了这两个想法，更有意义的是，doh:

FearofahackPlane的解决方案在所有其他复选框逐个选中/取消选中时选中“全部”复选框；Marek的解决方案是，选中/取消选中所有复选框，尽管我对他的代码做了一个小的编辑

这是最终的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也是由Fearofahackplane提出的一个小修改：

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

下面是最终功能的详细说明

---

谢谢大家。

这是一个糟糕的UI设计理念。我不这么认为，让我们看看用户怎么说。谢谢你的帮助。这也不能回答问题！你的禁用功能丢失了他想要什么？他从未要求禁用功能。在回答问题之前，你们没有人读过这些问题吗/添加禁用并不难，但是的，这是我的错，我没有包含它。我不打算这么做，所以千万不要理会我的答案，因为你不能简单地ctr+c ctr+v这样做@很抱歉我看错了这个问题，但是冷静点，没什么大不了的。是的，你是对的。但是，当他第一次尝试，然后看到，有可能添加其他项目的所有他会说，uupppps。他又开始了，你不觉得吗？相信我，即使不是现在，这也是他所需要的吗？莫特，我试过你的解决办法，但没有用。但我给了你一票，因为你的想法最终和我的想法很相似。谢谢。我用的是简明版。谢谢

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

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