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

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>

- sxv

Answer 1

当你通过编程方式更改复选框的值时，change事件不会触发。 为确保它被触发，你可以采取以下措施：

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

- Matthew Manela

---

你的理论是正确的，你的解决方案完美地工作了。谢谢。 - sxv

最好使用（至少在某些版本的jQuery中）$.fn.prop而不是$.fn.attr。Attr将分配和检索。Prop只检索。 - dgo

Answer 2

不必费心处理第一个片段。直接使用LABEL元素即可：

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

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

---

第二个片段可以进行优化：

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

- Šime Vidas

---

这个程序相关的内容需要翻译成中文。请仅返回翻译后的文本：$('.' + this.id)选择器无法工作。需要使用“＃”。而且我们不知道div里面是什么，你假设它是用作标签，但它可能是其他东西。 - Victor

Answer 3

你正在使用 '.'，这是用于类选择器的符号，而你应该使用 '#'，因为你正在使用元素 ID。像这样：

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

- Victor

---

OP故意这样做的.. ;) 他并不是在隐藏/显示复选框，而是使用与复选框ID相等的类来隐藏/显示<div>。 - Reigel Gallarde

@Victor 那样做没有意义，因为复选框是获得该ID的元素。 - Šime Vidas

@Sime 我不试图理解他们想要做什么。如果是这种情况，那就不够清晰明了。 - Victor

@Reigel 好的，但是如果没有标记，你的猜测和我的一样好。不过我猜这是有道理的。 - Victor

@Victor 当访问者勾选复选框时，它应该变得可见吗？但它已经可见了，否则访问者就无法勾选它。这没有意义。 - Šime Vidas

@Sime 我同意这没有意义。我见过更奇怪的事情。我想我们只能等待 OP 看看他想做什么。 - Victor