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

Question

我在我的表单中使用标签，像这样：

：

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

我想在用户取消选中复选框时隐藏一个元素，在其它情况下显示。

问题是，如果我将点击事件绑定到 "foo" 上，那么只有当用户单击复选框本身而不是标签时才会起作用。因此，我是否还需要在标签上绑定一个点击事件？或者应该将这两个元素都包含在一个 span 中吗？ 我的 HTML 已经包含了 2344 个元素，所以我希望在不添加任何内容的情况下完成，并尽可能地避免重复 JavaScript 代码或选择器。

- Willy

Answer 1

你应该使用 change() 事件，而不是绑定 click() 事件，这样无论如何触发更改，结果都将相同：

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

参考资料：

• change().

- David Thomas

---

感谢您提供完整的答案！ - Willy

Answer 2

无论单击 label 还是 input，input 上都应该触发 change 事件：

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

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

- Andrew Whitaker