Javascript Jquery“全选”复选框

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

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

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

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

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

：

导入jQuery左上菜单 添加缺少的isChecked函数 使用代替attr来选中这些框 这是因为selectAll方法在全局范围内不可用

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

默认情况下选择onload的原因，当选择onload时，所有输入的脚本都包装在一个匿名函数中，如下所示。它将使selectAll函数成为匿名函数中的本地方法，因此使用全局作用域的onclick事件处理程序将无法访问该方法，从而导致未捕获引用错误：selectAll未定义错误

演示：

更新 但你可以把它简化为

$(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处理程序，如图所示。这应该可以帮到你

$(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);                
            }
        });

    });
});

JSFIDLE使用这个

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

---

A看到了吗？你为什么不这样做呢？它更清晰易读

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

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

---

假设父复选框的类为mainselect，所有子复选框的类为childselect

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

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

$function{

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

});

})；

---

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

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

---

演示：

您只需将句柄功能添加到“全选”复选框上的单击事件：

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

然后这个函数应该足以选择全部或取消全部选择

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

---

更具体的解决方案：

$document.readyfunction{ $'checkAll'。单击，函数e{ $'input[name=chck_box[]'.prop'checked'，$this.is'：checked'； }; }; 名称 最后的 乔 雌鹿 约翰 史密斯 账单 白色

---

@销毁感谢您的帮助…但即使在修复后，如果您三次单击selectall，它也会停止工作这只是第一次工作，请尝试检查/取消检查again@wizkid也许您正在尝试初始版本，但上次编辑是在6分钟前修复的，为什么？有没有具体的原因；真奇怪。你对名声过敏吗。你为什么不把一些传给我..好办法，用它！。稍微简化：var check=$”.selectedId.length==$”.selectedId:checked.length；谢谢最近我也在使用：checked伪选择器，谢谢。您的代码非常简单，而且更好，因为当单击全选然后取消选中其中一个复选框，然后全选复选框更改为取消选中。喜欢改变功能的道具。它使交互更加完美。ops简单，但不能取消选中selectall复选框。请参阅@Letiagolves solution.@PeterKrauss是的，我忘记了取消选中复选框selectall的代码。letiagolves的代码说明了它的工作原理。注释与@MG_Bautistaops相同，很简单，但在取消选择其他项目时，不能取消选中selectall复选框。参见@Letiagolves解决方案。

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

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