Question

当有人点击第一个input:checkbox时，我希望我的代码检查所有复选框，但我的代码无法正常运行：

$('.table_show tr input:first').live('click',function(){
        var isChecked = $(this).prop('checked');
        $(".table_show tr input[name=checked[]]").each(function(){
            if (!$(this).prop('checked') == isChecked) {
                $(this).parent().click();
            }
        });
    });

问题的原因是什么？

Answer 1

您的代码的问题是您没有正确引用名称选择器：变化

$(".table_show tr input[name=checked[]]")

到

$(".table_show tr input[name='checked[]']")

请参阅： http://jsfiddle.net/cQYVE/5/

另外，你的用户体验可能更好。通常当用户手动检查所有复选框时，应检查checkall复选框，当用户取消选中一个框以便“all”未选中时，checkall框应取消选中

修改第二个问题的答案是您必须保持复选框总数的计数，并且在选中该数字时，必须选中checkall复选框，否则必须取消选中。每次用户手动检查复选框时都要进行此检查。对不起，我现在没有时间提供该代码。

Answer 2

你的问题在这里：

$(".table_show tr input[name=checked[]]")

jQuery将此视为查找名称checked[，因为第一个]终止名称。

你需要使用反斜杠来逃避它，反斜杠本身需要用另一个反斜杠进行转义。

$(".table_show tr input[name=checked\\[\\]]")

更换后，您的代码可以正常工作。

编辑：我会在这里留下这个答案，因为它有效并可能对类似问题有用，但mkoryak的答案是处理这个问题的正确方法。

Answer 3

试试这个：

http://jsfiddle.net/cQYVE/8/

$('.table_show tr').live('click',function(e) {
    var wasCheckboxClicked = $(e.target).is('input[name=delete[]]'),
        row = $(this),
        checkBox = row.find("input:checkbox"),
        shouldCheck = checkBox.prop('checked') == wasCheckboxClicked;
    if (!row.is(':first-child')) {
        row.css('backgroundColor', shouldCheck?"#ffd6c1":"");
        checkBox.prop('checked', shouldCheck);
    }
});

$('.table_show th input[type=checkbox]').live('click',function(){
    if($(this).is(':checked')) {
        $('.table_show td input[type=checkbox]:not(:checked)').parent().click();
    }
    else {
        $('.table_show td input[type=checkbox]:checked').parent().click();
    }
});

$('.table_show td input[type=checkbox]').live('click', function(){
    if($(this).is(':checked')) {
        var checkboxes = $('.table_show td input[type=checkbox]');
        if(checkboxes.length == checkboxes.filter(':checked').length) {
            $('.table_show th input[type=checkbox]').attr('checked', 'checked');
        }
    } 
    else {
        console.log($('.table_show th input[type=checkbox]').attr('checked'));
       $('.table_show th input[type=checkbox]').removeAttr('checked');
    }
});

选中所有复选框的问题？

3 个答案: