jquery - checkbox样式修改、全选全不选、选中更改value

本文链接：https://blog.csdn.net/weixin_40156417/article/details/80745614

<!DOCTYPE html>
<html>
<head>
	<title>checkbox</title>
	<link rel="stylesheet" href="fonts/iconfont.css">
	<script src="js/jquery-1.10.1.min.js" type="text/javascript"></script>
	<style type="text/css">
	ul,li {
		list-style: none;
	}
	.box {
		overflow: hidden;
		width: 300px;
		margin-top: 20px;
	}
	.check-left {
		float: left;
		width: 100px;
		background: #eee;
	}
	.check-right {
		float: right;
		width: 200px;
	}
	.check-left li,
	.check-right li {
		float: left;
		width: 100px;
	}
	.check-left li label,
	.check-right li label {
		margin-left: 4px; 
	}
	.checkbox:before {
	    content: "\e8ef";
	    font-family: "iconfont" !important;
	    margin-right: 5px;
	    font-size: 16px;
	    vertical-align: middle;
	    color: #b9b9b9;
	    background: #fff;
	    float: left;
	    font-weight: normal;
	    border-radius: 4px;
	    height: 16px;
	}
	.change:before {
	    content: "\e8f1";
	    font-family: "iconfont" !important;
	    color: #0587db;
	}
	.choose {
		border: 1px solid #ccc;
		background: none;
		width: 200px;
		height: 28px;
		font-size: 14px;
		text-align: left;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		border-radius: 4px;
	}
	</style>
</head>
<body>
<input type="button" class="form-control choose" value="choose">
<div class="box">
	<div class="check-left">
	    <li><input type="checkbox" class="checkbox" id="mem"><label for="m">member</label></li>
	    <li><input type="checkbox" class="checkbox" id="role"><label for="role">role</label></li>
	    <li><input type="checkbox" class="checkbox" id="name"><label for="n">name</label></li>
	</div>
	<div class="check-right">
	    <li><input type="checkbox" class="checkbox" id="1" name="mem"><label for="1">taka</label></li>
	    <li><input type="checkbox" class="checkbox" id="2" name="mem"><label for="2">toru</label></li>
	    <li><input type="checkbox" class="checkbox" id="3" name="mem"><label for="3">ryota</label></li>
	    <li><input type="checkbox" class="checkbox" id="4" name="mem"><label for="4">tomoya</label></li>
	    <l