全选复选框只能工作两次答案

【问题标题】：select all checkbox only works twice全选复选框只能工作两次
【发布时间】：2013-02-07 09:14:40
【问题描述】：

我从 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);


    });



});

【问题讨论】：

标签： jquery checkbox

【解决方案1】：

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

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

见.prop()

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

【讨论】：

从这条评论中学到了一两点——也请接受我的投票。

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

解决了一些问题，请参阅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);
        }
    });
});

【讨论】：

【解决方案4】：

你的代码在 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);
    });
});

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

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() 方法返回未定义的属性尚未设置。检索和更改 DOM 属性，例如表单元素的选中、选择或禁用状态，使用 .prop() 方法，jQuery doc

【讨论】：

【解决方案5】：

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

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

【讨论】：