1、全选，取消，反选的例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>全选以及取消测试</title>
</head>
<body>
<table border="1">
<thead>
<tr>
<th>
选择按钮
</th>
<th>
内容
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="checkbox">
</td>
<td>
123
</td>
</tr>
<tr>
<td>
<input type="checkbox">
</td>
<td>
456
</td>
</tr>
<tr>
<td>
<input type="checkbox">
</td>
<td>
789
</td>
</tr>
</tbody>
</table>
<input type="radio" name='cc' onclick="select_all()">:全选
<input type="radio" name='cc' onclick="clear_all()">:取消
<input type="radio" name='cc' onclick="reverse_all()">:反选
<script src="jquery-3.2.1.js"></script>
<script>
function select_all() {
$("table input[type='checkbox']").prop('checked',true)
}
function clear_all() {
$("table input[type='checkbox']").prop('checked',false)
}
function reverse_all() {
// var list = $("table input[type='checkbox']")
$("table input[type='checkbox']").each(function () {
var ischecked = $(this).prop('checked')
if(ischecked){
$(this).prop('checked',false)
}else {
$(this).prop("checked",true)
}
})
}
</script>
</body>
</html>
2、左侧菜单的例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>左侧菜单例子</title>
<style>
.aa{
background-color: greenyellow;
width: 30%;
height: 500px;
border-color: orange;
/*border-width: 4px;*/
border-style: solid;
float: left;
}
.bb{
background-color: aqua;
width: 69%;
height: 500px;
border-style:dashed;
/*border-width: 6px;*/
border-color: orange;
float: right;
}
.cc{
font-size: 40px;
}
.dd{
border-color: red;
border-style: solid;
background-color:black;
color: white;
}
.ee{
display: none;
}
</style>
</head>
<body>
<div class="aa">
<div>
<strong class="cc" onclick="func(this)">菜单1</strong>
<div class="dd ee">
<div>内容1</div>
<div>内容2</div>
<div>内容3</div>
<div>内容4</div>
</div>
</div>
<div>
<strong class="cc" onclick="func(this)">菜单2</strong>
<div class="dd ee">
<div>内容1</div>
<div>内容2</div>
<div>内容3</div>
<div>内容4</div>
</div>
</div>
<div>
<strong class="cc" onclick="func(this)">菜单3</strong>
<div class="dd ee">
<div>内容1</div>
<div>内容2</div>
<div>内容3</div>
<div>内容4</div>
</div>
</div>
</div>
<div class="bb">内容</div>
<script src="jquery-3.2.1.js"></script>
<script>
function func(ths) {
$(ths).next("div").removeClass("ee")
$(ths).parent().siblings("div").children("div").addClass("ee")
}
</script>
</body>
</html>
原创文章，作者：ItWorker，如若转载，请注明出处：https://blog.ytso.com/tech/pnotes/20860.html