label与input同用时，如何解决点击相应两次？

很多时候我们希望点击checkbox后面的文字之后，checkbox能相应的选中或者取消选中，要实现这种效果很简单就是把input标签放到label标签里面

像这样，但是很快我们就会发现问题，点击label获取input的value值的时候，会获取到两个值，这个不用多说，网上有很多对于这个结果的解释，那么到底有什么好的办法解决这个问题呢？其实很简单

只需要将input拿到label外面，然后给input添加id,label添加for属性，同时将点击事件绑定在input上面，这样不论是点击input还是点击label,都能获取到input的值，并且只获取一次