原生javascript自定义input[type=checkbox]效果

2018年6月27日  更新 能用css3，就不用js

用纯css3实现样式重写

 <!DOCTYPE html>
 <html lang="en">

 <head>
     <meta charset="UTF-8">
     <title>Document</title>
     <style type="text/css">
     input[type="checkbox"]+label::before {
         content: "";
         /*不换行空格*/
         display: inline-block;
         vertical-align: middle;
         font-size: 18px;
         width: 10px;
         height: 10px;
         margin-right: 10px;
         border-radius: %;
         border: 2px solid #01cd78;
         text-indent: 15px;
         line-height: ;
         padding: 4px;
     }

     input[type="checkbox"]:checked+label::before {
         background-color: #01cd78;
         background-clip: content-box;
     }

     input[type="checkbox"] {
         position: absolute;
         clip: rect(, , , );
     }
     </style>
 </head>

 <body>
     <div class="female">
         <input type="checkbox" id="female" name="female" checked="" />
         <label for="female">女</label>
     </div>
     <div class="male">
         <input type="checkbox" id="male" name="male" />
         <label for="male">男</label>
     </div>
     <script type="text/javascript">
         console.log(ee);
     </script>
 </body>

 </html>

上文已经讲input[type=radio]的做法发布，在我做input[input=checkbox]时候，觉得会和radio做法差不多，结果是有相似之后，但也有很大不同。

不同点有

1）checkbox自带冒泡和捕获事件，结果就是点击一下包裹checkbox的label会发生两次事件，也就是checkbox选中了，然后又不选中了，所以在对label绑定事件时候，需要停止冒泡

2）选中chekbox需要使用chekbox自带的checked属性，设置该属性的选中和被选中状态，这个与radio一致

代码如下

 <!DOCTYPE html>
 <html lang="en">

 <head>
     <meta charset="UTF-8">
     <title>自定义checkbox</title>
     <style type="text/css">
     #ceshi label input {
         display: none;
     }

     #ceshi label span {
         display: inline-block;
         width: 18px;
         height: 18px;
         border-radius: %;
         border: 2px solid #ddd;
         box-sizing: border-box;
         position: relative;
         top: 3px;
         margin-right: 6px;
     }

     #ceshi label span.active {
         border: 3px solid red;
     }
     </style>
 </head>

 <body>
     <form id="ceshi" action="test.php" method="get">

         <label>
             <span></span>
             <input type="checkbox" name="t1" value="这是测试1">这是测试1
         </label>
         <label>
             <span></span>
             <input type="checkbox" name="t2" value="这是测试2">这是测试2
         </label>
         <label>
             <span></span>
             <input type="checkbox" name="t3" value="这是测试3">这是测试3
         </label>
         <input type="submit" name="" value="提交">
     </form>
     <script type="text/javascript">
         //原生js实现的jquery的siblings()函数
         HTMLElement.prototype.siblings = function() {
             let arr = []; //保存兄弟节点
             let prev = this.previousSibling; //o的前一个同胞节点
             //先往上查询兄弟节点
             while (prev) {
                 if (prev.nodeType ==  && prev.tagName == this.tagName) {
                     arr.unshift(prev); //数组首部插入数组，保证节点顺序
                 }
                 prev = prev.previousSibling; //把上一节点赋值给prev
             }
             //往下查询兄弟节点
             let next = this.nextSibling; //o的后一个同胞节点
             while (next) {
                 if (next.nodeType ==  && next.tagName == this.tagName) {
                     arr.push(next); //数组尾部插入，保证节点顺序
                 }
                 next = next.nextSibling; //下一节点赋值给next，用于循环
             }
             return arr;
         }
         //判断HTMLElement是否含有某个class
         HTMLElement.prototype.hasClass = function(cls) {
             return this.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
         }
         //HTMLElement对象添加类
         HTMLElement.prototype.addClass = function(cls) {
             if (!this.hasClass(cls)) this.className += " " + cls;
         }
         //HTMLElement对象删除类
         HTMLElement.prototype.removeClass = function(cls) {
             if (this.hasClass(cls)) {
                 var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
                 this.className = this.className.replace(reg, ' ');
             }
         }
         //实现函数
         function nativeSelfRadio(dom) {
             //减少对dom的访问
             var span=dom.getElementsByTagName("span")[];
             var input=dom.getElementsByTagName("input")[];
             //有则删除或者不选中，没有则添加或者选中
             if (span.hasClass("active")) {
                 span.removeClass("active");
                 input.checked=false;
             }else{
                 span.addClass("active");
                 input.checked=true;
             }

         }
         //绑定事件
         var len=document.getElementById("ceshi").getElementsByTagName("label");
         for (var i = ; i < len.length; i++) {
             //避免返回该页面，隐藏的checkbox依然选中
             len[i].getElementsByTagName("input")[].checked=false;
             len[i].onclick=function(e){
                  nativeSelfRadio(this);
                  e.preventDefault();
             }
         }

     </script>
 </body>

 </html>

本文结束。