4

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


    });



});
4

5 回答 5

19

使用.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/

于 2013-02-07T09:17:12.960 回答
0

您的代码在 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

于 2013-02-07T09:24:00.353 回答
0

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

$(document).ready(function () {
    $(document).on("click", ".selectall2", function () {
        $(this).closest('tr').find('input[type=checkbox]').attr('checked', 'checked');
    });
});
于 2013-02-07T09:33:42.710 回答
0

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

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);
        }
    });
});
于 2013-02-07T09:56:58.657 回答
-1

这将有效,简短且方便的代码

<script>
    $('#select_all').click(function () {
    $( this ).closest('table').find(':checkbox').prop( 'checked' , this.checked ? true : false );
})
</script>
于 2014-06-10T09:43:03.447 回答