jQuery点击标签+复选框如何检测哪个被选中？

Question

我尝试按如下方式检查event.target.nodeName：

$("input").click(function(e){
    if(e.target.nodeName == "LABEL") {
       alert('label click');
        e.preventDefault();
    } else {
       alert($(this).attr('checked') ? 'checked': 'unchecked');
    }
});

但是名称从未等于标签？我做错了什么吗？

快速jsfiddle

- John Magnolia

---

在这种情况下，nodeName将始终等于您为事件选择的元素。除非您先选择标签，否则无法连接到标签。 - Ohgodwhy

如果您考虑使用 e.target，请始终绑定容器元素，基本上处理程序会在事件冒泡到达子元素时执行。 - Selvakumar Arumugam

Answer 1

你应该选择label(父级)元素。目前你的点击处理程序仅针对输入元素：

$("label").click(function(e){
  // ...
})

http://jsfiddle.net/j7nSq/

- Ram

Answer 2

我认为这个不起作用的原因是因为它只会在你点击输入框时运行：

我认为这个不起作用的原因是因为它只会在你点击输入框时运行：

  if(e.target.nodeName == "LABEL") {

- user1695032

Answer 3

您根本没有选择标签。请先选择标签，然后重试：

您在这里点击了错误的元素。

$('label').on('click', function(e) {
    // Your logic here

});

不要点击输入框。

确保使用.on()委派事件。

- Sushanth --

---

吹毛求疵：你的例子使用了 on()，但它没有委托。 - bfavaretto

我甚至不确定自己是否正确（因为您的代码确实处理了从输入冒泡的点击），但通常当我看到“委托”一词时，它是指当您针对后代节点时，但处理程序附加到父节点（例如 $('label').on('click', 'input', function ...），这在此处无法解决OP问题）。所以忘记我说的话，我不确定那是否技术上算是委托。 - bfavaretto

@bfavaretto.. 我在这里用错了单词.. 看起来你是对的 :) - Sushanth --