Question

我有一个复选框，可以选择全部，如果我按下它，它将选择所有选项（这很好！），然后如果我取消选择其中一个，它不会取消选择选择所有选项。如何做到这一点的任何帮助将不胜感激。

<span class="glyphicon glyphicon-check"></span>
<label for="sel1">Select days:</label><br />

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

我目前用于全选的脚本：

$(document).ready(function(){
    $('input[name="all"],input[name="title"]').bind('click', function(){
        var status = $(this).is(':checked');
        $('input[type="checkbox"]', $(this).parent('li')).prop('checked', status);
    });
});
$(document).ready(function){

}

Answer 1

实施例： http://jsfiddle.net/0e018w0y/

你大部分都在那里。我附加了一个＆＃34;更改＆＃34;所有复选框的事件监听器，确认（在更改时）是否选中了所有复选框...（仅供你使用复选框而不是单选按钮。单选按钮一次只能选择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);
});

在示例中，我试图按照您的惯例检查是否选择了某些内容等 - 除了我已经使用过＆＃34; change()＆＃34;而不是＆＃34; click()＆＃34; （捕获任何更改事件，而不仅仅是鼠标点击）。

逐行：

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

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

然后我们更新＆＃34;全选＆＃34;复选框。

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

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

我没有测试过这是否更快...我刚刚卸下检查＆＃34;已检查＆＃34;到jQuery本身。＆＃34; length＆＃34; property返回符合条件的元素数量 - ＆＃34; :not(:checked)＆＃34;做你期望的，只匹配不检查的上述输入。

如果计数不等于0，我们取消选择＆＃34;全选＆＃34;复选框。

实施例： http://jsfiddle.net/zyxgm2kz/

Answer 2

试试这个：

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

你可以尝试这个：

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

});

DEMO FIDDLE

Answer 4

$('input[name="all"],input[name="title"]').bind('click', function () {
    var status = $(this).is(':checked');
    $('input[type="checkbox"]', $(this).parent('li')).prop('checked', status);
});

var checkbox = $(':checkbox').not('#all');
$(checkbox).change(function () {
    checkbox.each(function () {
        if ($(this).is(':checked')) {

        } else {
            $(':checkbox#all').prop('checked', false)
        }


    })

})

获取除all之外的复选框，然后检查是否取消选中，从所有

中删除支票

DEMO

取消选中全选复选框

4 个答案: