自定义复选框CheckBox的样式

最新推荐文章于 2024-08-08 19:00:48 发布

黑盒变白盒才有意思

最新推荐文章于 2024-08-08 19:00:48 发布

阅读量920

点赞数

分类专栏： web前端

本文链接：https://blog.csdn.net/qq_36497454/article/details/79973126

版权

web前端专栏收录该内容

15 篇文章 0 订阅

订阅专栏

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

实现原理：第一效果实际上是一个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"/>