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. Linux GPIO键盘驱动开发记录_OMAPL138

    Linux GPIO键盘驱动开发记录_OMAPL138 Linux基本配置完毕了,这几天开始着手Linux驱动的开发,从一个最简单的键盘驱动开始,逐步的了解开发驱动的过程有哪些.看了一下Linux3. ...

  2. django的response-8

    视图函数在处理请求后,必须返回一个 HttpResponse 对象,或者 HttpResponse对象的子对象. 1. HttpResponse 可以通过 django.http.HttpRespon ...

  3. python--模块之sys与python解释器交互模块

    作用:sys模块是与python解释器交互的一个接口.它提供了一系列有关python运行环境的变量和函数. 常用函数:import sys sys.argv #命令行参数list,第一个元素是程序本身 ...

  4. 菜鸟学Linux - 变量基本规则

    变量是一个很重要的概念,无论是bash脚本还是其他语言,都是如此.在bash中,创建变量很简单,给变量一个名称即可.默认情况下,变量的值为空.我们可以通过等号为变量赋值.需要注意的是,变量和变量的值不 ...

  5. CC3200使用MQTT的SSL加密证书可用日期修改

    1. 在使用CC3200进行SSL加密的时候,需要证书,但是证书有一个截止日期,如果当前CC3200没有设置这个日期,那么证书通信会失败,需要添加代码 int setDeviceTime() { Sl ...

  6. CC2541广播机制和代码分析（未完成）

    1. 广播通道有3个,是固定的吗?设备为了节省功耗,可以忽略掉几个应答? 连接间隔可以是7.5ms到4s内的任意值,但必须是1.25ms的整数倍,从设备延迟,实际上是一个连接间隔的倍数,代表从设备在必 ...

  7. 收集、分析线上日志数据实战——ELK

    本文来自网易云社区 作者:田躲躲 用户行为统计(User Behavior Statistics, UBS)一直是互联网产品中必不可少的环节,也俗称埋点.对于产品经理,运营人员来说,埋点当然是越多,覆 ...

  8. path.resolve()和path.join()的区别

    path.join()  组装路径.该方法的主要用途在于,会正确使用当前系统的路径分隔符,Unix系统是/,Windows系统是\.路径字符中可以使用..或../进行相对路径的计算,其它路径表示符会被 ...

  9. python3基础盲点

    数值类型 Python支持四种不同的数值类型,包括int(整数)long(长整数)float(浮点数)complex (复数) python3对整数的大小不做限制 算数运算符 优先级: 逻辑运算符 优 ...

  10. 第三模块：面向对象&网络编程基础 第4章 FTP项目作业讲解

    01-FTP项目需求 02-FTP项目框架搭建 03-FTP项目用户认证 04--FTP项目制定标准定长消息头 05-FTP项目下载功能开发 06-FTP项目下载功能开发2 07-FTP项目ls文件列 ...