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

以编程方式更改复选框的值时，不会触发更改事件。你可以做些什么来确保它发火：

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

Answer 2

不要打扰第一个片段。只需使用LABEL元素：

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

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

可以优化第二个代码段：

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

Answer 3

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

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

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

3 个答案: