label和input的绑定问题

一、label和input两种绑定方式

1、label包裹input,这个时候点击文字可以选中当前项。此时如果给label绑定点击事件，点击label的时候会触发两次，这是因为label与其绑定元素的关系，当点击label时，浏览器会自动给被绑定元素也执行点击事件的行为，解决方法是用e.preventDefault()阻止默认行为。

//<label for="">  注意此处label里不能写for,不然就必须给input加id，按照第二种方式绑定关系，
//否则点击文字不能默认选中当前选项
<label>
    <input type="checkbox"  id="agree1">
    选项1
</label>

2、label和input写在同一层级，此时想要实现点击文字选中当前选项的功能，必须给label的for属性和input的id绑定相同值

<input type="checkbox"  id="option1"> <label for="option1">选项一</label>