标签：gty pcm oca orm acl aes jquer abd xtu
首先要来吐槽一下火狐浏览器，缓存还是记住的checkbox的状态怎么样的。反正我先打开网页，再修改checkbox，添加一个checked true，默认选中，刷新火狐的页面，竟然没有效果，用其他浏览器测试都有效果。。。。火狐要关闭当前网页，再打开才行，坑。。。。。我测试在其他浏览器中修改checked，然后刷新页面，其他浏览器都可以看到修改后的状态，唯独，火狐，，，要关闭页面再打开才行。。。。
再说一个，之所以for绑定表单的原理是，绑定了点击事件，触发了表单中元素的点击事件，所以我想在一个label中，天假jquery的toggle事件，在点击的时候，变换背景，同时用for来绑定checkbox,然后我发现for表单的绑定失效（jquery1.8.3）.。。估计jquery中的toggle事件，不是用事件绑定的方式来添加事件的，所以覆盖了默认的事件。而我用on()添加事件，不可以实现了，代码如下：
<head> <meta content="" charset="utf-8"> <title>Title</title> <script type="text/javascript" src="../js/jquery-1.8.3.min.js"></script> <style type="text/css"> input[type="checkbox"]{ /*display: none;*/ } label{ display: inline-block; width: 20px; height: 20px; border-radius: 50%; background-color: #9ca0a6; } </style> <script type="text/javascript"> $(function(){ cb.add_listen(); }); var cb={ check:false, add_listen:function(){ var self=this; $("label").on("click",function(){ if(self.check){ $(this).css({"background-color":""}); self.check=false; }else { $(this).css({"background-color":"green"}); self.check=true; } }); } } </script> </head> <body> <input type="checkbox" id="cb" ><label for="cb"></label> </body>
效果如下：
此处，没有让复选框居中，居中先撇开不说。
现在，将checkbox隐藏display:none，用laibel来代替，checkbox的状态显示；display为none的元素虽然，看不到，无法触发鼠标事件，也无法获取宽高位置等，但是存在文档结构中，他们的状态是可以获取，并且别改变的，除了看不到，和不占空间外，他们还是一样真实真实存在的。。。
代码修改如下：
<head> <meta content="" charset="utf-8"> <title>Title</title> <script type="text/javascript" src="../js/jquery-1.8.3.min.js"></script> <style type="text/css"> input[type="checkbox"]{ display: none; } label{ display: inline-block; width: 20px; height: 20px; border-radius: 50%; background-color: #9ca0a6; } </style> <script type="text/javascript"> $(function(){ cb.add_listen(); $("#cb").on("change",function(){ console.log($("#cb").prop("checked")); }) }); var cb={ check:false, add_listen:function(){ var self=this; $("label").on("click",function(){ if(self.check){ $(this).css({"background-color":""}); self.check=false; }else { $(this).css({"background-color":"green"}); self.check=true; } }); } } </script> </head> <body> <input type="checkbox" id="cb" ><label for="cb"></label> </body>
第一次点击，变成选中
再点击一下：
。。。这里只用了背景色，在实际过程中，可以用背景图片来代替label的背景色，这种思路可以取代checkbox默认的，且无法修改的样式。
ckeckbox的默认样式，label for添加toggle后失效，美化checkbox
标签：gty pcm oca orm acl aes jquer abd xtu
原文地址：http://www.cnblogs.com/thonus/p/6068916.html
