点击标签不会触发点击事件

Question

我有这个代码：

<label><input type="checkbox">True?</label>

和

$("label").click(function () {
  $(this).toggleClass("active");
});

当我单击复选框类切换时，当我单击“True?”时什么都没发生。为什么？

然后，如果我不在标签中包含复选框，一切正常。

<input type="checkbox" id="c1"><label for="c1">True?</label>

这太奇怪了......我是否输入“for”都没关系。

http://jsfiddle.net/zufs6ueh/1/

这里出了什么问题？

Answer 1

这样使用会更安全：

$(function() {

    $('input[type="checkbox"]').bind('change', function (v) {

        if($(this).is(':checked')) {
            $(this).parent().addClass('active');
        } else {
            $(this).parent().removeClass('active');
        }
    });

});

使用change 而不是click 允许人们使用键盘导航表单。

Answer 2

单击标签也会触发对输入的单击，因此将更改事件绑定到复选框本身：

$(function(){
    $("label input").on("click",function(){
	$(this).parent().toggleClass("active");
    });
});

.active {color:red;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<label><input type="checkbox" />True?</label>

或使用 CSS 3

如果您不需要支持旧浏览器，您可以使用 CSS 中的 :checked 伪类：

input[type=checkbox]:checked + label {color:red;}

<input type="checkbox" id="demo" name="demo"> 
<label for="demo">True?</label> 

Answer 3

你真的很接近@Andrey，关于 HTML 的一些值得注意的事情 inputs;

• radio 和 checkbox HTML types 可以有一个 onclick 调用 JavaScript

• radio 和 checkbox HTML types 都有可能被 JavaScript 检查的 .checked 属性和 CSS 中的 :checked 伪类

• 在radio HTML types上使用names允许分组事物

这里有一些示例代码stuff 与checkbox...

/**
 * Example JavaScript function for HTML input radio or checkbox types to call
 * @returns {boolean}
 */
function checkCheckbox(checkbox) {
  if (checkbox.checked != true) return false;
  /* Do JavaSript things when checkbox is checked */
  console.log('checkbox.checked -> ' + checkbox.checked);
  window.alert('checkbox.value -> ' + checkbox.value);
  return true;
}

/**
 * Hide things that should not be seen by just anyone
 */
.menu__checkbox,
.menu__container {
  display: none;
  visibility: hidden;
  opacity: 0;
  filter: alpha(opacity=0); /* Old MS compatibility */
}

/**
 * Stylize the label some
 */
.menu__label {
  display: block;
  width: 20px;
  height: 100%;
  transform: rotate(90deg);
}


/**
 * Show some things when checkbox is checked
 * Note, if feeling adventurous try using a `~` instead of `+`
 */
.menu__checkbox:checked + .menu > .menu__container {
  display: block;
  visibility: visible;
  opacity: 1;
  filter: alpha(opacity=100);
}

/**
 * Oh and un-rotate label when checkbox is checked too
 */
.menu__checkbox:checked + .menu > .menu__label {
  transform: rotate(0deg);
}

<input type="checkbox"
       class="menu__checkbox"
       value="valuable_checkbox"
       onclick="checkCheckbox(this);"
       id="trigger-menu">


<div class="menu">

  <div class="menu__container">
    <p class="menu__description">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
      proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
  </div>

  <label for="trigger-menu"
         class="menu__label">
         &#x25B2;
  </label>

</div>

...如果你看起来真的很近，定位通过trigger-menu在上述label的for和@987654341之间共享@'s id 正在使用 CSS 和 HTML 做一些很多人可能会求助于 JavaScript 的事情……尽管将复选框放在菜单范围之外只是为了演示；只是因为某事可以做并不总是意味着应该换句话说。

就像我逃避问题的代码真的很接近......

<input type="checkbox" id="c1"><label for="c1">True?</label>

...可能会与...一起使用

<input id="c1" type="checkbox" onclick="window.alert('this.checked -> ' + this.checked);">
<label for="c1">Is checked?</label>

正如我还暗示radio typed inputs 可以类似使用，以下是可能制作的东西的预览某天在一些荒谬的事情中公开......

    <div class="menu__style">
      <input type="radio"
             name="colorize"
             value="Default"
             onclick="color_picker.unsetAlternateStyleSheet()"
             class="menu__style__item"
             id="style-default">
      <label for="style-default"
             class="menu__style__label">Default Style</label>
      <br>

      <input type="radio"
             name="colorize"
             value="AlternateStyleOne"
             onclick="color_picker.setAlternateStyleSheet(title = this.value)"
             class="menu__style__item"
             id="style-one">
      <label for="style-one"
             class="menu__style__label">First Alternative Style</label>
      <br>

      <input type="radio"
             name="colorize"
             value="AlternateStyleTwo"
             onclick="color_picker.setAlternateStyleSheet(title = this.value)"
             class="menu__style__item"
             id="style-two">
      <label for="style-two"
             class="menu__style__label">Second Alternative Style</label>
    </div>