原生javascript自定义input[type=checkbox]效果
2018年6月27日 更新 能用css3，就不用js
用纯css3实现样式重写
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title>Document</title> 7 <style type="text/css"> 8 input[type="checkbox"]+label::before { 9 content: ""; 10 /*不换行空格*/ 11 display: inline-block; 12 vertical-align: middle; 13 font-size: 18px; 14 width: 10px; 15 height: 10px; 16 margin-right: 10px; 17 border-radius: 50%; 18 border: 2px solid #01cd78; 19 text-indent: 15px; 20 line-height: 1; 21 padding: 4px; 22 } 23 24 input[type="checkbox"]:checked+label::before { 25 background-color: #01cd78; 26 background-clip: content-box; 27 } 28 29 input[type="checkbox"] { 30 position: absolute; 31 clip: rect(0, 0, 0, 0); 32 } 33 </style> 34 </head> 35 36 <body> 37 <div class="female"> 38 <input type="checkbox" id="female" name="female" checked="" /> 39 <label for="female">女</label> 40 </div> 41 <div class="male"> 42 <input type="checkbox" id="male" name="male" /> 43 <label for="male">男</label> 44 </div> 45 <script type="text/javascript"> 46 console.log(ee); 47 </script> 48 </body> 49 50 </html>
上文已经讲input[type=radio]的做法发布，在我做input[input=checkbox]时候，觉得会和radio做法差不多，结果是有相似之后，但也有很大不同。
不同点有
1）checkbox自带冒泡和捕获事件，结果就是点击一下包裹checkbox的label会发生两次事件，也就是checkbox选中了，然后又不选中了，所以在对label绑定事件时候，需要停止冒泡
2）选中chekbox需要使用chekbox自带的checked属性，设置该属性的选中和被选中状态，这个与radio一致
代码如下
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title>自定义checkbox</title> 7 <style type="text/css"> 8 #ceshi label input { 9 display: none; 10 } 11 12 #ceshi label span { 13 display: inline-block; 14 width: 18px; 15 height: 18px; 16 border-radius: 50%; 17 border: 2px solid #ddd; 18 box-sizing: border-box; 19 position: relative; 20 top: 3px; 21 margin-right: 6px; 22 } 23 24 #ceshi label span.active { 25 border: 3px solid red; 26 } 27 </style> 28 </head> 29 30 <body> 31 <form id="ceshi" action="test.php" method="get"> 32 33 <label> 34 <span></span> 35 <input type="checkbox" name="t1" value="这是测试1">这是测试1 36 </label> 37 <label> 38 <span></span> 39 <input type="checkbox" name="t2" value="这是测试2">这是测试2 40 </label> 41 <label> 42 <span></span> 43 <input type="checkbox" name="t3" value="这是测试3">这是测试3 44 </label> 45 <input type="submit" name="" value="提交"> 46 </form> 47 <script type="text/javascript"> 48 //原生js实现的jquery的siblings()函数 49 HTMLElement.prototype.siblings = function() { 50 let arr = []; //保存兄弟节点 51 let prev = this.previousSibling; //o的前一个同胞节点 52 //先往上查询兄弟节点 53 while (prev) { 54 if (prev.nodeType == 1 && prev.tagName == this.tagName) { 55 arr.unshift(prev); //数组首部插入数组，保证节点顺序 56 } 57 prev = prev.previousSibling; //把上一节点赋值给prev 58 } 59 //往下查询兄弟节点 60 let next = this.nextSibling; //o的后一个同胞节点 61 while (next) { 62 if (next.nodeType == 1 && next.tagName == this.tagName) { 63 arr.push(next); //数组尾部插入，保证节点顺序 64 } 65 next = next.nextSibling; //下一节点赋值给next，用于循环 66 } 67 return arr; 68 } 69 //判断HTMLElement是否含有某个class 70 HTMLElement.prototype.hasClass = function(cls) { 71 return this.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)')); 72 } 73 //HTMLElement对象添加类 74 HTMLElement.prototype.addClass = function(cls) { 75 if (!this.hasClass(cls)) this.className += " " + cls; 76 } 77 //HTMLElement对象删除类 78 HTMLElement.prototype.removeClass = function(cls) { 79 if (this.hasClass(cls)) { 80 var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)'); 81 this.className = this.className.replace(reg, ' '); 82 } 83 } 84 //实现函数 85 function nativeSelfRadio(dom) { 86 //减少对dom的访问 87 var span=dom.getElementsByTagName("span")[0]; 88 var input=dom.getElementsByTagName("input")[0]; 89 //有则删除或者不选中，没有则添加或者选中 90 if (span.hasClass("active")) { 91 span.removeClass("active"); 92 input.checked=false; 93 }else{ 94 span.addClass("active"); 95 input.checked=true; 96 } 97 98 99 } 100 //绑定事件 101 var len=document.getElementById("ceshi").getElementsByTagName("label"); 102 for (var i = 0; i < len.length; i++) { 103 //避免返回该页面，隐藏的checkbox依然选中 104 len[i].getElementsByTagName("input")[0].checked=false; 105 len[i].onclick=function(e){ 106 nativeSelfRadio(this); 107 e.preventDefault(); 108 } 109 } 110 111 </script> 112 </body> 113 114 </html>
本文结束。
我站在山顶看风景！下面是我的家乡！
