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功能
• 使用道具代替attr检查方框

Answer 3

这是因为该方法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从输入元素中删除所有处理程序,如本演示中所示