Question

我从stackoverflow获得了这个代码，它看起来像一个非常好的“全选”复选框解决方案，任何想法为什么它在第二次点击后失败？

<table>
    <tr>
        <td>
            <input type='checkbox' value='0' class=''>
        </td>
        <td>
            <input type='checkbox' value='0' class=''>
        </td>
        <td>
            <input type='checkbox' value='0' class=''>
        </td>
        <td width="100" align="right">
            select all <input type='checkbox' value='0' class='selectall2'>
        </td>
    </tr>
</table>

$(document).ready(function () {


    $(document).on("click", ".selectall2", function () {


        $(this).closest('tr').find('input[type=checkbox]').attr('checked', this.checked);


    });



});

Answer 1

在jQuery 1.6上使用.prop()代替.attr()

如果使用jQuery 1.6，代码if ( $(elem).attr("checked") )将检索实际内容属性，这不会随着复选框的选中和取消选中而改变。它仅用于存储checked属性的默认值或初始值。为了保持向后兼容性，jQuery 1.6.1+中的.attr()方法将为您检索和更新属性，因此不需要将布尔属性的代码更改为.prop()。然而，检索已检查值的首选方法是使用上面列出的选项之一。要查看最新jQuery中的工作方式，请选中/取消选中下面示例中的复选框。

请参阅.prop()

演示 - http://jsfiddle.net/f9QYx/

Answer 2

您的代码不适用于jQuery 1.9，并且由于您拥有jQuery版本的框架，请选择1.8.3并且它可以正常工作。

<强> Live Demo

$(document).ready(function () {
    $(document).on("click", ".selectall2", function () {
        $(this).closest('tr').find('input[type=checkbox]').attr('checked', this.checked);
    });
});

您应该使用prop而不是at jQuery 1.6 and above

<强> Live Demo

$(document).ready(function () {
    $(document).on("click", ".selectall2", function () {
        $(this).closest('tr').find('input[type=checkbox]').prop('checked', this.checked);
    });
});

从jQuery 1.6开始，.attr（）方法为属性返回undefined 尚未设定。检索和更改DOM属性，例如选中，选中或禁用表单元素的状态，使用 .prop（）方法，jQuery doc

Answer 3

尝试使用.attr('checked', 'checked')

$(document).ready(function () {
    $(document).on("click", ".selectall2", function () {
        $(this).closest('tr').find('input[type=checkbox]').attr('checked', 'checked');
    });
});

Answer 4

某些问题已解决，请参阅here

上的现场演示

HTML代码是：

<table>
    <tr>
        <td>
            <input type='checkbox' value='0' class='abc'>
        </td>
        <td>
            <input type='checkbox' value='0' class='abc'>
        </td>
        <td>
            <input type='checkbox' value='0' class='abc'>
        </td>
        <td width="100" align="right">
            select all <input type='checkbox' value='0' class='selectall2'>
        </td>
    </tr>
</table>

和Javascript是：

$(document).ready(function () {
    $(document).on("click", ".selectall2", function () {
        $(this).closest('tr').find('input[type=checkbox]').attr('checked', this.checked);
    });
    $(document).on("click",".abc",function(){
        var temp=0;
        if(!$(".abc").attr('checked'))
        {
            temp=1;
        }
        if(temp==0)
        {
                    $(".selectall2").attr('checked',true);
        }
        else
        {
                    $(".selectall2").attr('checked',false);
        }
    });
});

Answer 5

这将工作，简短而便捷的代码

<script>
    $('#select_all').click(function () {
    $( this ).closest('table').find(':checkbox').prop( 'checked' , this.checked ? true : false );
})
</script>

全选复选框只能工作两次

5 个答案: