Question

我注意到我的代码在jQuery 2.1.4中不起作用。但是在jquery 1.4.3中工作。我已经制作了一个代码，通过该代码检查主复选框检查表中的所有复选框。该代码适用于前2次单击，但不适用于第3次单击。当我使用jquery 1.4.3时，代码可以正常工作。 jquery代码是 -

<script type="text/javascript">
    $(document).ready(function () {
        $("#mainCheckBox").click(function () {
            if ($(this).is(":checked")) {
                $("#pageTbody").find('input[type="checkbox"]').each(function () {
                    $(this).attr("checked", true);
                });
            }
            else {
                $("#pageTbody").find('input[type="checkbox"]').each(function () {
                    $(this).attr("checked", false);
                });
            }
        });
    });
</script>

有人可以解决为什么它在最新的jquery版本上失败了吗？

Answer 1

您需要使用.prop()代替.attr()

从jQuery 1.6开始，.prop()方法提供了一种显式检索属性值的方法，而.attr()检索属性。

$(this).prop("checked", true/false);

现有代码可以优化为

$(document).ready(function () {
    $("#mainCheckBox").change(function () {
        $("#pageTbody input[type='checkbox']").prop("checked", this.checked);
    });
});

无需使用.each()
使用change事件代替click

Answer 2

checked是属性而非属性，因此您必须立即使用.prop才能使其正确：

<script type="text/javascript">
    $(document).ready(function () {
        $("#mainCheckBox").click(function () {
            if ($(this).is(":checked")) {
                $("#pageTbody").find('input[type="checkbox"]').each(function () {
                    $(this).prop("checked", true);
                });
            }
            else {
                $("#pageTbody").find('input[type="checkbox"]').each(function () {
                    $(this).prop("checked", false);
                });
            }
        });
    });
</script>

Answer 3

使用这种方式：

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

代码在jQuery 2.1.4中失败，但在旧版本

3 个答案: