<!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
jquery - checkbox样式修改、全选全不选、选中更改value
最新推荐文章于 2023-12-05 16:43:15 发布
这篇博客主要探讨了如何使用jQuery修改checkbox的样式,包括全选和全不选的功能实现,以及选中状态时value值的动态改变。通过示例代码详细解释了操作checkbox的技巧和方法。
摘要由CSDN通过智能技术生成