自定义复选框CheckBox的样式

原创 2018年04月17日 12:52:39

需求:默认样式是第一个  点击后样式是第二个

    

实现原理:  第一效果实际上是一个div   第二效果是多选按钮    开始多选按钮隐藏  点击div 多选选中且显示  取消打钩多选隐藏 div显示  

实现代码:

          

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<%@include file="/common/common_easyui.jsp"%>
<link href="<%=basePath%>/css/table.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript">
$(function(){
// 这里是实现隐藏和显现的地方  要注意一下   不要在标签上通过click属性调用函数   不然this效果不对(不太了解的话可以看一下我的另一篇博文说的是JS中this的问题)  当然你也可以不用this  
	$(".checkboxDiv").click(function(){
		if($(this).is(":visible")){
			$(this).next().show();
			$(this).next().prop("checked",true);
			$(this).hide();	
		}
	});
	$(".checkbox").click(function(){
		if($(this).is(":visible")){
			$(this).prev().show();
			$(this).hide();	
		}
	});
});
</script>
<style type="text/css"> 
//这里是div样式 
 .checkboxDiv{
   width:20px;
   height:20px;
   border:1px solid #bfbfbf;
   background-color: #eeeeee;
   box-sizing: border-box;
   margin:0 auto;
   box-shadow: 0px 0px 1px #888888
   }
 .checkbox{
     display:none
   }
   
</style>
</head>
<body>
    <div class="checkboxDiv">—</div><input type="checkbox" name="listDataCheckbox" class="checkbox"/> 
</body>
</html>          

版权声明:原创可以转载,但是记得点赞哦 https://blog.csdn.net/qq_36497454/article/details/79973126

《与熊共舞》第一章--逆“风”而行

 逃避风险就等于举旗投降。在过去,如果恰好遇到一个看来全无风险的项目,你也许会把这看作一次愉快的享受(slam dunk),或许还会感谢你的幸运星给了你这样一个轻松的项目。我们也曾有这样的反应——多么...
  • zdg
  • zdg
  • 2004-02-23 18:51:00
  • 2458

自定义复选框checkbox样式

复选框作为网页中比较常见的一个组件,有的时候我们需要对它进行美化,但是我们无法直接为其定义样式,所以我们需要一些其它的办法。表单元素中有label 元素和 for属性,当我们点击label 标签时,对...
  • u014291497
  • u014291497
  • 2016-07-31 23:33:46
  • 19166

Jquery实现自定义复选框样式

checkbox应该是一个比较常用的html功能了,不过浏览器自带的checkbox往往样式不怎么好看,而且不同浏览器效果也不一样。出于美化和统一视觉效果的需求,checkbox的自定义就被提出来了。...
  • qq_32340877
  • qq_32340877
  • 2017-01-16 14:10:39
  • 651

自定义复选框,复选框样式修改,重写复选框

改变复选框原有样式,使得变得好看起来
  • liujunxin11
  • liujunxin11
  • 2016-01-11 12:58:30
  • 4934

纯css3自定义复选框checkbox样式

html:部分: css:部分 .tiaojianlist03{ position: relative; } .tiaojianlist03 input[type=check...
  • Sandkin
  • Sandkin
  • 2015-06-19 11:48:38
  • 1367

升级版--支持ie8单选框与复选框自定义样式制作

  • 2016年08月01日 15:35
  • 88KB
  • 下载

bootstrap-table自定义复选框列的样式

为了满足项目需求,需要修改bootstrap-table的复选框的默认样式,起初想着尽量不改动他的源码,尽管最后样式能满足需求,但是会功能上出现各种问题。没办法,还是觉得改动源码。网上有很多修改复选框...
  • mht1829
  • mht1829
  • 2017-06-02 23:37:56
  • 3507

CSS3自定义美化复选框Checkbox组合

今天我们要来分享一组非常漂亮的CSS3自定义复选框checkbox,每一个checkbox都有其各自的特点。有几款checkbox在选中的情况下还会出现动画效果,非常不错的CSS3自定义美化check...
  • natalie86
  • natalie86
  • 2015-03-30 16:17:13
  • 465

checkbox兼容主流浏览器的自定义样式

  • yintianqin
  • yintianqin
  • 2017-04-14 15:13:08
  • 550

自定义复选框、单选按钮外观方法。支持IE、Firefox、chrome

当UI拿给你的设计稿中的复选框或单选按钮的外观与默认的外观出入很大,更漂亮,色彩更艳丽,是否会嘴角一抽,一筹莫展。不怕!在这里,你将找到完美的解决方法。...
  • as1200
  • as1200
  • 2016-05-11 10:06:01
  • 4535
收藏助手
不良信息举报
您举报文章:自定义复选框CheckBox的样式
举报原因:
原因补充:

(最多只允许输入30个字)