jquery - 全选复选框只能工作两次

Question

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

http://jsfiddle.net/R9zjk/2/

<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

使用.prop()而不是.attr()上面的 jQuery 1.6

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

看.prop()

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

Answer 2

您的代码在 jQuery 1.9 上不起作用，因为您拥有的 jQuery 版本的框架，选择 1.8.3 并且它会起作用。

现场演示

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

对于jQuery 1.6 及更高版本，您应该使用 prop 而不是 attr

现场演示

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

解决了一些问题，请参见此处的现场演示

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>