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

Posted 2023-02-22

【中文标题】为啥我的复选框更改事件没有被触发？

【英文标题】：Why isn't my checkbox change event triggered?为什么我的复选框更改事件没有被触发？

【发布时间】：2011-06-19 16:35:11

【问题描述】：

我有两个功能。

第一个函数将 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>

【参考方案1】：

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

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

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

---

第二个sn-p可以优化：

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

【讨论】：

$('.' + this.id) 选择器不起作用。需要使用'#'。而且我们不知道 div 中的内容，您假设他正在使用它作为标签，它可能是别的东西。

【参考方案2】：

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

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

【讨论】：

您的理论得到验证，您的解决方案完美运行。谢谢。

$.fn.prop vs $.fn.attr 更好用（至少在某些版本的 jQuery 中）。 Attr 将分配和检索。道具只是检索。

【参考方案3】：

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

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

【讨论】：

OP 是故意这样做的.. ;) 他没有隐藏/显示复选框，而是 <div> 的类与复选框的 id 等效。

@Victor 这没有意义，因为复选框是获得该 ID 的元素。

@Sime 我不会试图理解他们想要做什么。如果是这样，那就不清楚了。

@Reigel 很公平，但如果没有标记，你的猜测和我的一样好。但我想这是有道理的。

@Victor 那么当访问者选中复选框时，它应该变得可见吗？但它已经是可见的，否则访问者无法检查它。这没有意义。