选择所有复选框，同时跟踪手动选择 jquery

Question

一段时间以来，我一直在为复选框使用一个简单的全选脚本，它看起来像这样：

<span id="select">Select All</span>

与

$('#select').click(function(event) {
  var $that = $(this);
  $('.checkbox').each(function() {
      this.checked = $that.is(':checked');
  });
});

这很简单。它附加到 onclick，使用类 .checkbox 遍历所有输入，并相应地检查或取消选中它们。不过，我现在想做的是让它对用户更加友好，并为其添加以下功能。

1) 当用户单击标记为“全选”的链接时，它应该像往常一样选中所有复选框，然后将文本更改为“取消全选”。同样，当用户单击“取消全选”时，文本将返回“全选”。

2）如果用户手动选择所有复选框，我想检查这种情况并将文本从全选更新为取消全选。

Answer 1

您的代码正在检查<span> 是否为:checked，据我所知这是不可能的。也许我错了，但在这个答案中，我将使用不同的方法来跟踪它，即数据属性。

// initialize 'checked' property
$('#select').data('checked', false);

// make link control all checkboxes
$('#select').click(function(event) {
  var $that = $(this);
  var isChecked = ! $that.data('checked');
  $that.data('checked', isChecked).html(isChecked ? 'Deselect All' : 'Select All');
  $('.checkbox').prop('checked', isChecked);
});

// make checkboxes update link
$('.checkbox').change(function(event) {
  var numChecked = $('.checkbox:checked').length;
  if (numChecked === 0) {
    $('#select').data('checked', false).html('Select All');
  } else if (numChecked === $('.checkbox').length) {
    $('#select').data('checked', true).html('Deselect All');
  }
});

Answer 2

不是 jquery，但这是我要做的

var cb=document.getElementsByClassName('cb'); //get all the checkboxes
var selectAll=document.getElementById('selectAll'); //get select all button

function selectAllState(inputEle,selectAllEle){ //class to manage the states of the checkboxes
    var state=1; //1 if button says select all, 0 otherwise;
    var num=inputEle.length;
    function allChecked(){ //see if all are checked
        var x=0;
        for(var i=0;i<num;i++){
            if(inputEle[i].checked==true){
                x+=1;
            }
        }
        return x;
    }
    function handler(){ //if all checked or all unchecked, change select all button text
        var y=allChecked()
        if( y==num && state){
            selectAllEle.innerHTML='Deselect All';
            state=0;
        } else if(y==0 && !state){
            selectAllEle.innerHTML='Select All';
            state=1;
        }
    }
    for(var i=0;i<num;i++){
        inputEle[i].addEventListener('change',handler); //listen for changes in checks
    }
    function checkAll(){ //function checks or unchecks all boxes
        for(var i=0;i<num;i++){
            inputEle[i].checked=state;
        }
        handler();
    }
    selectAll.addEventListener('click',checkAll); //listen for button click
}

var myState=new selectAllState(cb,selectAll); //instance the selectAllState class

这会创建一个 javascript 类来管理所有复选框的状态。它有两个参数，第一个是复选框数组（如果你使用 getElementsByClassName，你会得到），第二个是全选按钮。如果您希望能够让应用程序的不同部分选择或取消选择所有复选框，则可以使用 this 关键字公开内部方法。

Answer 3

尝试将其分解为几个功能：让我们调用 span 切换，因为它可以全选和取消全选。

<span id="toggle">Select All</span>

我们将拥有一个选择和取消选择所有值的功能。无需像 prop sets the value for all elements 那样遍历列表

function SetAll(value){
    $(".checkbox").prop("checked", value);
}

然后是切换按钮：

$("#toggle").click(function(){
    if($(this).text() == "Select All"){
        SetAll(true);
        $(this).text("De-select All");
    } else {
        SetAll(false);
        $(this).text("Select All");
    }
});

最后，我们需要为每个复选框设置一个 onchange 事件：

$(".checkbox").change(function(){
    var allCheckboxes = $(".checkbox");
    var allChecked = $.grep(allCheckboxes, function(n,i){
        return $(n).is(":checked");
    }); //grep returns all elements in array that match criteria
    var allUnchecked = $.grep(allCheckboxes, function(n,i){
        return $(n)is(":checked");
    },true); //invert=true returns all elements in array that do not match

    // check the lengths of the arrays
    if (allChecked.length == allCheckboxes.length)
        $("#toggle").text("De-select All");

    if (allUnchecked.length == allCheckboxes.length)
        $("#toggle").text("Select All");

}):