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就是你得到的），第二个是select all按钮。如果您希望能够（例如）让应用程序的其他部分选择或取消选中所有复选框，则可以使用this关键字公开内部方法。

Answer 3

尝试在几个函数中将其分解：让我们调用范围切换，因为它可以选择和取消全部。

<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");

}):

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

3 个答案: