javascript - Jquery“全选”复选框

Question

一旦单击“全选”复选框，我将尝试选择页面上的所有复选框，并且我正在为此使用 jquery，如您在以下链接中所见：

选择和取消选择所有复选框的代码是：

function selectAll() {
    $('.selectedId').attr('checked', isChecked('selectall'));
}

function isChecked(checkboxId) {
    var id = '#' + checkboxId;
    return $(id).is(":checked");
}

在坚持了一天之后，我仍然不知道为什么我不能让它工作。请帮忙

score 24 · Accepted Answer

你为什么不这样做呢？它更清晰易读

$('#selectall').click(function () {
    $('.selectedId').prop('checked', this.checked);
});

$('.selectedId').change(function () {
    var check = ($('.selectedId').filter(":checked").length == $('.selectedId').length);
    $('#selectall').prop("checked", check);
});

演示

score 12 · Accepted Answer

在我做了 3 次修复后，你的小提琴就可以工作了：

jQuery 的导入（左上菜单）
添加缺少的isChecked功能
使用道具而不是attr检查框

score 7 · Accepted Answer

这是因为该方法selectAll在全局范围内不可用。

在左侧面板的第二个下拉列表中Frameworks and Extensions，选择no -wrap head/body它会正常工作。

默认情况下选择的原因onload是选择Onload时，所有输入的脚本都包裹在匿名函数中，如下所示。它将使selectAll函数成为匿名函数内的本地方法，因此使用全局范围的 onclick 事件处理程序将无法访问导致Uncaught ReferenceError: selectAll is not defined错误的方法。

$(window).load(function(){
    //Entered script
});

演示：小提琴

更新但您可以将其简化为

$(function(){
    $('#selectall').click(function(i, v){
        $('.selectedId').prop('checked', this.checked);
    });

    var checkCount = $('.selectedId').length;
    $('.selectedId').click(function(i, v){
        $('#selectall').prop('checked',$('.selectedId:checked').length  == checkCount)
    });
});

onclick并从输入元素中删除所有处理程序，如本演示所示

score 4 · Accepted Answer

用这个...

$('#selectall').on('click', function() {
    $('.selectedId').attr('checked', $(this).is(":checked"));
});

看这个DEMO

score 4 · Accepted Answer

$(document).ready(function () {
    $('#selectall').click(function () {
        $('.selectedId').prop('checked', $(this).is(":checked"));
    });
});

more Optimized

score 0 · Accepted Answer

这应该为您解决问题。

$(document).ready(function () {
    $('#selectall').click(function () {
         var checked = $(this).is(':checked');            
        $('.selectedId').each(function () {
            var checkBox = $(this);               
            if (checked) {
                checkBox.prop('checked', true);                
            }
            else {
                checkBox.prop('checked', false);                
            }
        });

    });
});

JsFiddle http://jsfiddle.net/Ra3uL/

score 0 · Accepted Answer

假设父复选框有一个主选择类，所有子复选框都有一个子选择类

然后选择 parent 将选择所有复选框，反之亦然，代码如下：

$('#mainselect').live('change',function(){
if($(this).attr('checked') == 'checked') {
    $('.childselect').attr('checked','checked');
} else {
    $('.childselect').removeAttr('checked');
}
});

score 0 · Accepted Answer

$(函数(){

// add multiple select / deselect functionality
$("#selectall").click(function () {
      $('.case').attr('checked', this.checked);
});

// if all checkbox are selected, check the selectall checkbox
// and viceversa
$(".case").click(function(){

    if($(".case").length == $(".case:checked").length) {
        $("#selectall").attr("checked", "checked");
    } else {
        $("#selectall").removeAttr("checked");
    }

});

});

score 0 · Accepted Answer

如果您的复选框具有与单击事件关联的特定处理，则对 @letiagoalves 解决方案进行了小幅增强。OP没有要求，但我过去必须做的事情。基本上，它不是直接设置每个依赖复选框的选中属性，而是将每个依赖复选框的选中状态与全选复选框进行比较，并对处于相反状态的复选框触发点击事件。

$('#selectall').click(function () {
    var parentState = $(this).prop('checked');
    $('.selectedId').each(function() {
        if ($(this).prop('checked') !== parentState) {
            $(this).trigger("click");
        }
});
});

演示： https ://jsfiddle.net/jajntuqb/2/

score 0 · Accepted Answer

您可以简单地将句柄功能添加到全选复选框上的单击事件：

$('#chk-all-items').click(selectAll);

然后这个功能应该足以全选或取消全选。

selectAll = function (event) {
        var self = this;
        $('.template-item-select').each(function () {
            this.checked = self.checked;
        });
    }

score 0 · Accepted Answer

更具体的解决方案：

$(document).ready(function(){
  $('#checkAll').on('click', function ( e ) {
    $('input[name="chck_box[]"]').prop('checked', $(this).is(':checked'));
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <thead>
    <th><input type="checkbox" id="checkAll"></th>
    <th>Name</th>
    <th>Last</th>
  </thead>
  <tbody>
    <tr>
      <td><input type="checkbox" name="chck_box[]" value="1"></td>
      <td>Joe</td>
      <td>Doe</td>
    </tr>
    <tr>
      <td><input type="checkbox" name="chck_box[]" value="2"></td>
      <td>John</td>
      <td>Smith</td>
    </tr>
    <tr>
      <td><input type="checkbox" name="chck_box[]" value="3"></td>
      <td>Bill</td>
      <td>White</td>
    </tr>
  </tbody>
</table>

javascript - Jquery“全选”复选框

11 回答 11

Related

Reference