自定义复选框CheckBox的样式

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

    

实现原理:  第一效果实际上是一个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
个人分类: web前端
上一篇java.lang.UnsupportedClassVersionError: com/mysql/jdbc/Driver : Unsupported major.minor version 52.0
下一篇IntelliJ IDEA下载和破解
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭