單擊標簽不會觸發單擊事件

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>