为什么我的复选框更改事件没有被触发？

Question

我有两个功能。

第一个函数将 div 单击转换为选中/未选中切换。 第二个函数将复选框更改转换为隐藏/显示事件。

问题是当我使用第一个函数来选中/取消选中该框时，没有调用第二个函数。我是 javascript 新手，谢谢。

<script type="text/javascript">
$(document).ready(function() {
    $(":checkbox").parent().click(function(evt) {
        if (evt.target.type !== 'checkbox') {
            var $checkbox = $(":checkbox", this);
            $checkbox.attr('checked', !$checkbox.attr('checked'));
            evt.stopPropagation();
            return false;
        }
    });
});
</script>

<script type="text/javascript">
$(document).ready(function() {
    $(":checkbox").change(function() {
        if($(this).attr("checked")) {
            $('.'+this.id).show();
        }
        else {
            $('.'+this.id).hide();
        }
    });
});
</script>

Answer 1

不要打扰第一个sn-p。只需使用 LABEL 元素：

<label><input type="checkbox">Some option</label>

现在，当用户点击标签（复选框旁边的文本）时，复选框将被激活。

---

第二个sn-p可以优化：

$('input:checkbox').change(function() {
    $('#' + this.id).toggle(this.checked);
});

Answer 2

当您以编程方式更改复选框的值时，不会触发 change 事件。你可以做的是确保它触发：

 $(":checkbox").parent().click(function(evt) {
    if (evt.target.type !== 'checkbox') {
        var $checkbox = $(":checkbox", this);
        $checkbox.attr('checked', !$checkbox.attr('checked'));
        $checkbox.change();
    }
});

Answer 3

您使用的是用于类选择器的'.'，而不是使用'#'，因为您使用的是元素ID。像这样：

$(document).ready(function() {
    $(":checkbox").bind('change', function() {
        if($(this).attr("checked")) {
            $('#'+this.id).show();
        }
        else {
            $('#'+this.id).hide();
        }
    });
});