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. ES6 imports用法

    import defaultExport from "module-name"; import * as name from "module-name"; // ...

  2. 用JavaScript动态实现单元格合并

    不太想描述,大家自行理解吧,这样可能记忆会深一点儿- <script type="text/javascript"> function mergeCells(){ va ...

  3. 在XAML中为ItemsControl定义分组，适合mvvm绑定

    可以先参考一下这个文章: http://www.cnblogs.com/zoexia/archive/2014/11/30/4134012.html step0: 先展示一下最简陋的界面: 上图是一个 ...

  4. 北京Uber优步司机奖励政策（12月26日）

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

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

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

  6. Java：break和continue关键字的作用

    二者的作用和区别 1. break:直接跳出当前循环体(while.for.do while)或程序块(switch).其中switch case执行时,一定会先进行匹配,匹配成功返回当前case的值 ...

  7. maven私有库搭建

    一.在企业中基本上都会有自己的maven私有库,主要的目的就是方便依赖包的下载.如果采用远程的方式来实现的话,很多时候会考虑网速问题.如果自己活着公司搭建的私有库,这一样在使用上面会效率更高. 二.私 ...

  8. substr是不安全的

    今天遇到一个问题,数据库中保存的内容通过php在页面无法显示,如果将内容换行或加个空格或者随便加点其他内容就能正常显示. 非常的诡异,显示的内容是通过截取得到的.代码非常简单 substr($pMar ...

  9. ElasticSearch搜索引擎安装配置拼音插件pinyin

    近几篇ElasticSearch系列: 1.阿里云服务器Linux系统安装配置ElasticSearch搜索引擎 2.Linux系统中ElasticSearch搜索引擎安装配置Head插件 3.Ela ...

  10. Python 多线程、进程、协程上手体验

    浅谈 Python 多线程.进程.协程上手体验 前言:浅谈 Python 很多人都认为 Python 的多线程是垃圾(GIL 说这锅甩不掉啊~):本章节主要给你体验下 Python 的两个库 Thre ...