Question

在我的html页面中，我想动态插入复选框，我希望在顶部有一个master复选框，所以如果选中它，则会检查所有动态创建的复选框，如果未选中，则所有动态复选变得不受控制。我有这段代码：

<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}'>

然而它运作不正常。如果我点击主人，那么他们都会被检查。如果我再次点击它，那么所有都取消选中，如果我再次点击它，它们仍然不受控制。

有谁知道这个问题？

由于

Answer 1

使用 prop instead of attr ，保证元素的设置属性比设置元素属性有效。较旧的jquery verison没有prop，attr用于执行两者的工作，后来的prop被引入并且用于设置这些属性 prop 是最好的。

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

Answer 2

需要使用.prop()来设置已检查的属性，而不是.attr()

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

例如：

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

阅读：Attributes vs. Properties

Answer 3

使用.prop()

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

现在您的代码变为

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

$（elem）.prop（＆＃34; checked＆＃34;）true（布尔值）将随复选框一起更改   状态

$（elem）.attr（＆＃34;已检查＆＃34;）（1.6）＆＃34;已检查＆＃34; （字符串）的初始状态   复选框;不会改变$（elem）.attr（＆＃34;已检查＆＃34;）

（1.6.1+）＆＃34;检查＆＃34; （字符串）将随复选框状态
而变化
$（elem）.attr（＆＃34; checked＆＃34;）（pre-1.6）true（布尔值）更改为   复选框状态

Jquery复选框切换不起作用

3 个答案: