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

在我做了3次修复后，你的小提琴起作用了 ：

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

Answer 3

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

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

选择默认onload的原因是当选择onload时，所有输入的脚本都包含在匿名函数中，如下所示。 它将使selectAll函数成为匿名函数内的本地方法，因此使用全局作用域的onclick事件处理程序将无法访问导致Uncaught ReferenceError: selectAll is not defined的方法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处理程序，如本演示中所示

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类，所有子元素都有一个childselect类

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

$('#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没有要求，但过去我不得不做的事情。 基本上，它不是直接设置每个从属复选框的checked属性，而是将每个从属复选框的已检查状态与selectall复选框进行比较，并对处于相反状态的复选框触发click事件。

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

您只需在select all复选框上将click函数添加到click事件：

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