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

radio和checkbox HTML type s 都可以对JavaScript进行onclick调用
radio和checkbox HTML type s 都具有.checked属性，可以由JavaScript和{{1 }} CSS中的伪类
在:checked HTML name s 上使用 radio s 允许分组事情

下面是一些使用type ...

进行填充的示例代码。

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"> ▲ </label> </div>进行定位，在上述 trigger-menu的 label和 for的 input正在使用CSS和HTML做一些事情，许多人可能会使用JavaScript来做……尽管将复选框放置在菜单范围之外很远的地方只是为了示范；换句话说，只是因为“可以完成某件事”并不总是意味着应该这样做。

就像我对问题代码的迷惑一样……

id

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

<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 d type s 可以类似地使用，以下是预览荒谬的某件事中有一天可能会公开的某件事...

input

Answer 3

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

＆＃13;

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

＆＃13;

.active {color:red;}

＆＃13;

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

＆＃13;

或使用CSS 3

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

3 个答案:

或使用CSS 3