取消选中全选复选框

示例：http://jsfiddle.net/0e018w0y/

你是那里的大部分。我会在所有复选框上附加一个"更改"事件侦听器，确认(在更改时(是否选中了所有复选框。。。(仅供参考，您使用的是复选框，而不是单选按钮。单选按钮一次只允许选择1。(

// On change of any (not "Select All" checkbox)
$('input[name="selected[]"]').change(function () {
    var selectAll = true;
    // Confirm all checkboxes are checked (or not)
    $('input[name="selected[]"]').each(function (i, obj) {
        if ($(obj).is(':checked') === false) {
            // At least one checkbox isn't selected
            selectAll = false;
            return false;
        }
    });
    // Update "Select All" checkbox appropriately
    $('input[name="all"]').prop('checked', selectAll);
});

在这个例子中，我试图遵循您的惯例来检查是否选择了内容等等——除了我使用了"change()"而不是"click()"(它捕捉任何更改事件，而不仅仅是鼠标点击(。

逐行：

$('input[name="selected[]"]').change(function () {
   ...
}

这将捕获所有选择框上的更改事件。您可以使用类或名称约定来标识要附加到的复选框。

    var selectAll = true;

此变量的作用域到达提供给随后的.each(...)调用的无名称函数。我们使用它来跟踪是否选中了每个复选框。

    $('input[name="selected[]"]').each(function (i, obj) {
        if ($(obj).is(':checked') === false) {
            // At least one checkbox isn't selected
            selectAll = false;
            return false;
        }
    });

这会选中每个复选框，查看是否有未复选框。

然后我们适当地更新"全选"复选框。

再看一遍(2分钟后(，我可以看到这实际上可以减少：

    var allSelected = ($('input[name="selected[]"]:not(:checked)').length === 0);
    // Update "Select All" checkbox appropriately
    $('input[name="all"]').prop('checked', allSelected);

我还没有测试这是否更快。。。我刚刚将"已检查"的检查卸载到jQuery本身。"length"属性返回有多少元素符合条件-":not(:checked)"符合您的预期，只匹配前面提到的未检查的输入。

如果计数不等于0，则取消选中"全选"复选框。

示例：http://jsfiddle.net/zyxgm2kz/

试试这个：

您需要为所有checkbox天绑定一个change侦听器，如果选中了所有复选框，则可以使用select all复选框checked属性。

$(document).ready(function () {
    var allCB = $('input[name="selected[]"]');
    var mainCB = $('input[name="all"]')
    mainCB.on('click', function () {
        var status = $(this).is(':checked');
        allCB.prop('checked', status);
    });
    allCB.on('change', function () {
        var status = $('input[name="selected[]"]:checked').length === allCB.length;
        $('input[name="all"]').prop('checked', status);
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<li>
  <input type="checkbox" name="all" id="all" />
  <label for='all'>Select All</label>
  <ul>
    <ul>
      <li class="moveli">
        <input type="checkbox" name="selected[]" id="box_1" value="1" />
        <label for="box_1">Monday</label>
      </li>
      <li class="moveli">
        <input type="checkbox" name="selected[]" id="box_2" value="2" />
        <label for="box_2">Tuesday</label>
      </li>
      <li class="moveli">
        <input type="checkbox" name="selected[]" id="box_3" value="3" />
        <label for="box_3">Wednesday</label>
      </li>
      <li class="moveli">
        <input type="checkbox" name="selected[]" id="box_4" value="4" />
        <label for="box_4">Thursday</label>
      </li>
      <li class="moveli">
        <input type="checkbox" name="selected[]" id="box_5" value="5" />
        <label for="box_5">Friday</label>
      </li>
      <li class="moveli">
        <input type="checkbox" name="selected[]" id="box_6" value="6" />
        <label for="box_6">Saturday</label>
      </li>
      <li class="moveli">
        <input type="checkbox" name="selected[]" id="box_7" value="7" />
        <label for="box_7">Sunday</label>
      </li>
    </ul>
  </ul>
</li>

你可以试试这个：

$(document).ready(function() {
    $('input[name="all"],input[name="title').click(function(event) {  //on click 
        if(this.checked) { 
            $('input[type="checkbox').each(function() { 
                this.checked = true; 
            });
        }else{
            $('.input[type="checkbox').each(function() { 
                this.checked = false; 
            });         
        }
    });
});

演示FIDDLE