JQuery不会选择和改变复选框的状态

JQuery doesn't select and change the state of a checkbox

本文关键字：复选框 状态 改变 选择 JQuery      更新时间：2023-09-26

这是html:

<div class="btn btn-stock-report" id="superman">
    Superman <input type="checkbox" name="superman" />
</div>

这是JQuery:

$('#superman').on('click', function () {
    if ($(this).children('input:checkbox:first').is(':checked')) {
        superman = true;
        $(this).children('input:checkbox:first').removeAttr('checked');
    }
    else {
        superman = false;
        $(this).children('input:checkbox:first').attr('checked', 'checked');
    }
    console.log("superman: " + superman);
});

我想要实现的只是改变子复选框的状态并改变superman变量的值，但由于某种原因，它总是在控制台日志中打印出superman: false。即使当我手动检查复选框并单击div，即使复选框现在被选中，它报告superman: false

是什么原因导致的?

你可以只是改变<div>为<label>和摆脱所有的jQuery代码，它将只是工作

您应该使用.prop()而不是attr，因为checked是复选框的属性。您还可以将代码缩小到:

$('#superman').on('click', function () {
 var chk = $(this).find('input:checkbox:first')
 chk.prop("checked", !chk.prop("checked"));
});
演示工作

$('#superman').on('click', function () {
    superman = !$(this).children('input:checkbox:first').is(':checked');
    $(this).children('input:checkbox:first').prop('checked',superman);
    console.log("superman: " + superman);
});
相关文章：