Question

这是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

导致这种情况的原因是什么？

Answer 1

你可以只需将<div>更改为<label>并删除所有jQuery代码，它就可以正常工作。

Answer 2

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

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

<强> Working Demo

Answer 3

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

JQuery没有选择和更改复选框的状态

3 个答案: