同时在标签和复选框上绑定 JavaScript jQuery 点击事件

Posted 2023-05-08

【中文标题】同时在标签和复选框上绑定 JavaScript jQuery 点击事件

【英文标题】：Bind JavaScript jQuery click event on label AND on checkbox simultaneously

【发布时间】：2012-03-01 01:39:36

【问题描述】：

我正在为我的表单使用标签，如下所示：

<label for="foo" id="bar">Label</label>
<input type="checkbox" id="foo" />

我想在用户取消选中该框时隐藏一个元素，否则显示它。

问题是，如果我将点击事件绑定到“foo”，它只会在用户点击复选框本身而不是标签时起作用。因此，我是否还需要在标签上绑定点击事件？或者我应该将两个元素都包含在一个范围内？ 我的 html 已经包含 2344 个元素，所以我想在不添加任何内容的情况下执行此操作，并且尽可能不加倍 javascript 代码或选择器。

【参考方案1】：

您应该使用change() 事件来绑定，而不是使用click() 事件绑定，然后无论触发此更改，结果将是相同的：

$('#foo').change(
    function()
        // do whatever
    );

参考资料：

change()。

【讨论】：

感谢您的完整回答！

【参考方案2】：

change 事件应针对input 触发，无论是单击label 还是input：

$("#foo").change(function ()  ... );

示例 http://jsfiddle.net/andrewwhitaker/6LMXW/

【讨论】：

感谢您的快速回答！

@Willy：没问题！很高兴能提供帮助。