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. 使用 win10 的库来组织自己的同类文件

    库相当于虚拟目录,可以把不同的文件夹包含起来. 找起东西来不用东奔西跑了...

  2. HyperLedger Fabric 1.4 基础环境搭建（7）

    学习了前面几章理论知识后,本章开始介绍实践操作,先介绍Fabric基础环境搭建,采用的操作系统为Centos 7 64位,依次介绍Docker安装.Docker-Compose安装.GO语言环境安装. ...

  3. 传说是小米家的一道面试题难倒了某Java程序员。扑克牌排序问题。

    网上说的是有位网友在面试小米Java岗三次后,终于挺进了第三轮面试,结果还是败在了两道算法题上面. 1.写个读方法和写方法,实现读写锁 2.一副从1到n的牌,每次从牌堆顶取一张放桌子上,再取一张放牌堆 ...

  4. 2038: [2009国家集训队]小Z的袜子(hose)

    2038: [2009国家集训队]小Z的袜子(hose) Time Limit: 20 Sec  Memory Limit: 259 MBSubmit: 9472  Solved: 4344 Desc ...

  5. rm 删除不掉文件，报错解决 以及 chattr的介绍

    rm 强制删除一个文件 居然删除不掉! 出现这个错误: rm: cannot remove ‘default/.user.ini’: Operation not permitted 原来呀: 然后呢 ...

  6. ASP.NET MVC 微信JS-SDK认证

    layout: post title: ASP.NET MVC 微信JS-SDK认证 category: .net date: 2016-11-01 00:00:00 tags: .net javas ...

  7. php webservice 可能存在的坑

    场景: 今天在生产机器上调用webservice失败 报 ...failed to load external entity... wget一下地址发现报500错误  把wsdl去掉再wget 发现就 ...

  8. iOS SSL Pinning 保护你的 API

    随着互联网的发展,网站全面 https 化已经越来越被重视,做为 App 开发人员,从一开始就让 API 都走 SSL 也是十分必要的.但是光这样就足够了吗? SSL 可以保护线上 API 数据不被篡 ...

  9. JavaWeb(二)——Tomcat服务器(一)

    一.Tomcat服务器端口的配置 Tomcat的所有配置都放在conf文件夹之中,里面的server.xml文件是配置的核心文件. 如果想修改Tomcat服务器的启动端口,则可以在server.xml ...

  10. 「日常训练」Regular Bridge（Codeforces Round 306 Div.2 D）

    题意与分析 图论基础+思维题. 代码 #include <bits/stdc++.h> #define MP make_pair #define PB emplace_back #defi ...