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>
jquery实现全选，取消，反选的功能&实现左侧菜单
原文地址：http://www.cnblogs.com/bainianminguo/p/7719847.html