通常做网页时不会用radio和checkbox的原有样式，通常会进行样式美化，手机端我用的jqurey weui框架，他的原理是这样的:
<label class="check_label" for="sort_4">
<input type="radio" class="weui_check" name="sort" id="sort_4">
<i class="weui_icon_checked">Price Low to High </i>
</label>
<style>
.check_label{position:relative;}
.weui_check{position:absolute;left:-9999em;}
</style>
将input移出屏幕，样式加在i标签上，在电脑端我自己写代码的时候出现个问题：
.weui_check{position:absolute;left:9999em;}
时，当input被选中时，屏幕居然诡异的聚焦至这个input，跳出了原页面；当我改成：
.weui_check{position:absolute;left:-9999em;}
就没有问题了，没去深研究，暂时不管；如果有同行碰到这情况，且知道原因，感谢留言告知。
主要谈谈label的点击事件中遇到的坑，(jq写的)：
<label class="check_label" for="sort_4">
<input type="radio" class="weui_check" name="sort" id="sort_4">
<i class="weui_icon_checked">Price Low to High </i>
</label>$("label").on("click",function(){
$(this).next().slideToggle();
console.log(1);
})
原本想给其后边的元素添加个toggle事件，就是如果显示就收起，收起就显示；这下好，点了后，就展开后马上收起。。。
什么鬼，不知道代码出啥问题了，console.log()后发现，被执行了两次！！
自行猜测：（如果有错，欢迎高手指正）
点击label后，点击事件会trigger（触发了）label的for的那个input，以上代码，是正好是其内部的input的click事件（来触发被选中或未被选中事件），然后input的点击事件，冒泡至父级label上，所以导致了两次点击的情况。
我的解决思路：
1.改变结构，将input从label便签中取出放在别的地方：
<label class="check_label" for="sort_4">
<i class="weui_icon_checked">Price Low to High </i>
</label>
<input type="radio" class="weui_check" name="sort" id="sort_4"> $("label").on("click",function(){console.log(1); })
亲测可行，只执行了一次，上述的原因判断应该是正确的！
1.在不改变原有结构的情况下，因为我label里边的i标签实际是充满label的，所以将点击事件加在i上（坑来了）：
<label class="check_label" for="sort_4">
<input type="radio" class="weui_check" name="sort" id="sort_4">
<i class="weui_icon_checked">Price Low to High </i>
</label>$("i").on("click",function(){
$(this).next().slideToggle();
console.log(1);
})
我去！坑来了，完全没有用，console中什么都没输出，出了什么事？？？
再改：
<label class="check_label" for="sort_4">
<input type="radio" class="weui_check" name="sort" id="sort_4">
<i class="weui_icon_checked">Price Low to High </i>
</label>$("label").children().on("click",function(){
$(this).next().slideToggle();
console.log(1);
})
我去！执行了，而且是执行了一次！
什么鬼？噢噢噢…应该是label触发了input的click事件，所以执行了！
再改：
<label class="check_label" for="sort_4">
<input type="radio" class="weui_check" name="sort" id="sort_4">
<i class="weui_icon_checked">Price Low to High </i>
</label>$("label input").on("click",function(){
$(this).next().slideToggle();
console.log(1);
})
成功执行！上述判断是正确的！
我那个去，那问题来了，放在label便签中的所有的元素，你其实是点不到的！你其实是点不到的！你其实是点不到的！
亲测：确实是这样！！
有时间去探索具体原因了！知其然，标记下！
如有错误！欢迎指正！
