label和checkbox绑定使用规则

 label配合checkbox使用

"label" 标签添加 "for" 属性 可以绑定同步点击 "for" 属性值为 "checkbox" 的 "id"。

<div class="u-chk-box">
	<input type="checkbox" id="chk1"><label id="lab1" for="chk1"></label>
</div>

效果图

点击label的时候，label有先处理自己对应的事件，然后再通知checkbox改变状态，而且，只会通知checkbox改变状态，并不告诉他要改变成true还是false,checkbox当前是true就变成false，是false就改成true.

可以监听两个元素的点击事件查看触发效果：

 

  $("#chk1").on('click',function (e) {
     alert('chk1 我被点了');
     alert(this.checked);
  });

  $("#lab1").on('click',function (e) {
       alert('我被点了');
  })；

 点击触发效果

 

 

 另：checkbox获取点击结果，不能使用 $("chk1").val() 该值为“on”，可以使用

$("#chk1").prop('checked')获取是否选中效果。

$("#chk1").prop('checked')