Jquery“全选”复选框

Question

单击“全选”复选框后，我正在尝试选择页面上的所有复选框，并且我正在为此使用 jquery，您可以在下面的链接中看到：

http://jsfiddle.net/priyam/K9P8A/

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

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

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

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

Answer 1

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

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

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

DEMO

Answer 2

Your fiddle works after I made 3 fixes：

• jQuery 的导入（左上菜单）
• 添加缺少的isChecked 函数
• 使用prop 而不是attr 来勾选复选框

Answer 3

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

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

The reason being by default onload is selected and when onload is selected all the entered script is wrapped inside a anonymous function as given below.它将使 selectAll 函数成为匿名函数内的本地方法，因此使用全局范围的 onclick 事件处理程序将无法访问导致 Uncaught ReferenceError: selectAll is not defined 错误的方法。

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

演示：Fiddle

更新 但是你可以把它简化为

$(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 处理程序，如this demo 所示

Answer 4

使用这个...

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

看到这个DEMO

Answer 5

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

more Optimized

Answer 6

这应该对你有用。

$(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/

Answer 7

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

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

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

Answer 8

$(函数(){

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

});

});

Answer 9

如果您的复选框具有与单击事件相关的特定处理，则对 @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/

Answer 10

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

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

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

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

Answer 11

更具体的解决方案：

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