0

在我的 html 页面中，我想动态插入复选框，并且我希望在顶部有 1 个主复选框，因此如果选中，则所有动态创建的复选框都会被选中，如果未选中，则所有动态创建的复选框都会被选中。我有这个代码：

<script type="text/javascript">
    $(function() {
        $("#selectAll").click(function() {
            var checked = $(this).prop('checked');
            $(".profilebox").attr("checked", checked);
        });
    });
</script>

主复选框

<input id="selectAll" type="checkbox" name="selectall" value="All">

其他复选框：（使用此 php 代码插入循环中）

<input type='checkbox' class='profilebox' name='select' value='{$member_id}'>

但是，它无法正常运行。如果我单击主控，那么它们都会被检查。如果我再次单击它，则所有内容都未选中，然后如果我再次单击它，它们仍然未选中。

有谁知道这个问题？

谢谢

4

3 回答 3

6

使用 prop 而不是 attr，可以保证设置元素的属性比设置元素的属性有效。较旧的 jquery 版本没有 prop，attr 用于执行两者的工作，后来引入了 prop，用于设置像这些prop这样的属性是最好的。

$(function() {
        $("#selectAll").click(function() {
            $(".profilebox").prop("checked", this.checked);
        });
    });
于 2013-09-26T02:25:49.590 回答
1

需要使用.prop()来设置选中的属性而不是.attr()

$(".profilebox").prop("checked", this.checked);

前任：

$(function () {
    //cache the selector result
    var $profileboxes = $(".profilebox");
    $("#selectAll").click(function () {
        $profileboxes.attr("checked", this.checked);
    });
});

阅读：属性与属性

于 2013-09-26T02:26:05.997 回答
1

使用.prop()

$(".profilebox").prop("checked", this.checked);

现在你的代码变成了

$(function () {
    $("#selectAll").click(function () {
        $(".profilebox").prop("checked", this.checked);
    });
});

$( elem ).prop( "checked" ) true (Boolean) 将随着复选框状态而改变

$( elem ).attr( "checked" ) (1.6) "checked" (String) 复选框的初始状态；不改变 $( elem ).attr( "checked" )

(1.6.1+) "checked" (String) 会随着复选框的状态而改变

$( elem ).attr( "checked" ) (pre-1.6) true (Boolean) 随复选框状态改变

于 2013-09-26T02:26:22.333 回答