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

Question

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

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

与

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

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

1) 当用户单击标记为 "Select All" 的 link 时，它应该 select 所有复选框正常，但随后将文本更改为 "Deselect All"。同样，当用户单击 "Deselect All" 时，文本将返回到 "Select All"。

2) 如果用户手动 select 所有复选框我想检查这种情况并将文本从 Select 全部更新为 Deselect 全部。

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 class 来管理所有复选框的状态。它有两个参数，第一个是复选框数组（这是您使用 getElementsByClassName 时得到的），第二个是 select 全部按钮。如果您希望能够使用 this 关键字公开内部方法，例如，让应用程序的不同部分 select 或 deselect 所有复选框。

Answer 3

尝试将其分解为几个功能：让我们称之为跨度切换，因为它可以 select 和 de-select 全部。

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

我们将有一个函数来 select 和 de-select 所有的值。无需遍历列表 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");

}):

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

Select All Checkboxes while keeping track of manual selects jquery

javascript

checkbox

jquery