jquery实现全选，取消，反选的功能&实现左侧菜单
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实现全选，取消，反选的功能&实现左侧菜单的更多相关文章
- （转载）jquery实现全选、反选、获得所有选中的checkbox
举了7个不同的checkbox状态,和大家一一分享. 1.全选 $("#btn1").click(function(){ $("input[name='checkbox' ...
- jquery实现全选、反选、不选
<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8&quo ...
- jQuery实现全选、反选和不选功能
HTML 我们的页面上有一个歌曲列表,列出多行歌曲名称,并匹配复选框供用户选择,并且在列表下方有一排操作按钮. ? 1 2 3 4 5 6 7 8 9 10 11 12 13 <ul id=&q ...
- 利用JQuery实现全选和反选的几种方法
前面介绍了利用JavaScript实现全选功能,其中也有要注意的几点,现在讲解下在JQuery怎么实现全选和反选,下面提供了两种方法实现. 如图:要实现的效果是点击全选框全部选中,再点击全部不选中 方 ...
- JQuery实现全选、反选和取消功能
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- jquery实现全选，反选，取消的操作
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 用JavaScript实现CheckBox的全选取消反选，及遮罩层中添加内容
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- jQuery实现全选、反选、删除
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content ...
- Jquery，全选，反选，
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
随机推荐
- IOS NSBundle的使用，注意mainBundle和Custom Bundle的区别
1.[NSBundle mainBundle],文件夹其实是Group,如左侧的树形文件管理器 Build之后,文件直接就复制到了根目录下,于是读取的方法,应该是这样: NSString *earth ...
- SQL优化（3）：使用explain了解SQL性能-part2
接上文,上文对type列用实例做了说明,本文对Extra列进行一些说明. Extra列 Using filesort 前文说,需要对所有的查询结果进行一次排序,例如当使用order by时.但是若查询 ...
- VMware上安装CenterOS
1.环境:Win10.VMware Workstation 12.Centeros 7 2.VMware workstation12安装 双击“VMware_workstation_full_12.5 ...
- YAML 与 front-matter
1. YAML 类似 Linux:Linux is not UniX,YAML:YAML ain't markup language,是一种递归缩写,是一个可读性高并且容易被人类阅读,容易和脚本语言交 ...
- Linux下下载JDK
需要加特殊的前缀,不然无法下载文件 . 例如JDK8 U131 wget -c --header "Cookie: oraclelicense=accept-securebackup-coo ...
- [BZOJ4802]欧拉函数
bzoj description 给出\(n\),求\(\varphi(n)\).\(n\le10^{18}\) sol \(Pollard\ Rho\),存个代码. code #include< ...
- sysfs中属性文件的建立
1.device中建立属性文件 (1)函数调用关系: /**************************************************************/ device_c ...
- 使用ajax提交form表单，包括ajax文件上传 转http://www.cnblogs.com/zhuxiaojie/p/4783939.html
使用ajax提交form表单,包括ajax文件上传 前言 使用ajax请求数据,很多人都会,比如说: $.post(path,{data:data},function(data){ ... },&qu ...
- Vim: 有关空格和tab的设置，以及如何全文将空格转成tab
这两行可以放在~/.vimrc: :set tabstop=8:set noexpandtab 这个可以每次手动运行,从而将所有的空格转成tab:%retab!
- MySql登陆密码忘记了 怎么办？
MySql登陆密码忘记了 怎么办?root密码:连root密码忘记没用root进修改mysql数据库user表咯 root密码: 方法一:MySQL提供跳访问控制命令行参数通命令行命令启MySQL服务 ...