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

Question

我有这个代码：

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

和

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

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

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

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

这太奇怪了......如果我把“换”也没关系也没关系。

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

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

• radio和checkbox HTML type都可以通过onclick调用JavaScript

• radio和checkbox HTML type都具有.checked属性，可以由JavaScript和CSS中的:checked伪类:checked

• 在radio HTML type上使用name s允许对事物进行分组

下面是做的东西有一些示例代码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> 

...如果你看起来非常接近，通过上面label的 for和input的 id之间共享的trigger-menu 定位是用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 type d input ，以下是可能在某些荒谬的东西中被公开的东西的预览......

    <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>

Answer 3

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

 $(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>