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>

本文结束。

原生javascript自定义input[type=checkbox]效果的更多相关文章

  1. 原生javascript自定义input[type=radio]效果

    2018年6月27日 更新 找到最为简单的仅仅使用css3的方案 <!DOCTYPE html> <html lang="en"> <head> ...

  2. 关于input 的选中，自定义input[type="checkbox"]样式

    1.css 呈现   选中后 的input的样式可以用 /*背景图*/      background:url('../pc/images/archives/icon_choosed.png') no ...

  3. 自定义input[type="checkbox"]的样式

    对复选框自定义样式,我们以前一直用的脚本来实现,不过现在可以使用新的伪类 :checkbox 来实现. 如果直接对复选框设置样式,那么这个伪类并不实用,因为没有多少样式能够对复选框起作用.不过,倒是可 ...

  4. 自定义input[type="checkbox"]样式

    input[type=checkbox] { visibility: hidden; position: relative;} input[type=checkbox]:after { content ...

  5. 关于复选框input[type=checkbox]

    关于复选框input[type=checkbox],其实在前面的文章中说过一次,当时主要关注点在设置复选框的状态,利用prop实现,今天继续关注一下复选框. 自己在项目中,遇到一个全选/全不选的需求, ...

  6. js控制input type=checkbox 的勾选

    <script type="text/javascript">     $(function () {         //双击表格弹出窗口         //为jQ ...

  7. input[type=checkbox]

    一个问题,今天用jquery-1.11.3.min.js时遇到的关于input复选框的问题. 类似于以下代码: <ul class="demo">  <li> ...

  8. <input type="radio" >与<input type="checkbox">值得获取

    <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"% ...

  9. 定制 input[type="radio"] 和 input[type="checkbox"] 样式

    表单中,经常会使用到单选按钮和复选框,但是,input[type="radio"] 和 input[type="checkbox"] 的默认样式在不同的浏览器或 ...

随机推荐

  1. Oracle之基础操作

    sqlplus常用命令: 进入sqlplus模式:sqlplus /nolog 管理员登录: conn / as sysdba 登录本机的数据库 conn sys/123456 as sysdba 普 ...

  2. 电子相册之bitmap

    位图文件主要分为3部分:1. 文件信息头     14Byte 2. 位图信息头     40Byte 3. RGB颜色阵列   由图像长宽尺寸决定 1. 文件信息头 定义结构体: typedef s ...

  3. 四则运算_EX

    在原有四则运算基础上,除整数以外要支持真分数运算(验证正确性) 一次出的题避免相互重复 可定制出题数目 #include <stdio.h>#include <stdlib.h> ...

  4. 成都Uber优步司机奖励政策（3月31日）

    滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...

  5. 天津Uber优步司机奖励政策（1月4日~1月10日）

    滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...

  6. 2019年猪年海报PSD模板-第三部分

    14套精美猪年海报,免费猪年海报,下载地址:百度网盘,https://pan.baidu.com/s/15m6sWTdDzuBfdmHYxJVvbA              

  7. 175. Invert Binary Tree【LintCode by java】

    Description Invert a binary tree. Example 1 1 / \ / \ 2 3 => 3 2 / \ 4 4    解题:题目要求讲二叉树的左子树和右子树对调 ...

  8. centos端口管理

    centos 6.5 ###############配置filter表防火墙############### #清除预设表filter中的所有规则链的规则iptables -F #清除预设表filter ...

  9. IDEA搭载Tomcat使用JSTL连接Oracle数据库

    1.在IDEA中,JSTL库添加到WEB-INF/lib下面可以直接在JSP页面上通过 <%@ taglib uri="http://java.sun.com/jsp/jstl/cor ...

  10. 剑指offer-整数中1出现的次数27

    题目描述 求出1~13的整数中1出现的次数,并算出100~1300的整数中1出现的次数?为此他特别数了一下1~13中包含1的数字有1.10.11.12.13因此共出现6次,但是对于后面问题他就没辙了. ...