js/jQuery实现全选效果
时间:2019-06-17
这篇文章主要为大家详细介绍了js/jQuery两种代码实现全选效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
本文实例为大家分享了js/jQuery两种代码实现全选效果的具体代码,供大家参考,具体内容如下
注意点
在获取子选框的时候别加上 全选框的个数了
技巧
找 tbody 下面的input标签 就可以
jq文件夹自己下载即可
思路
var all=my$("j_tb").getElementsByTagName("input"); // alert(all.length); //实现1 点击全选 子选框都得被全选 /** * * 点击全选框 判断全选框的checked是否为真 为真 遍历所有子选框 设置所有子选框的checked=true; true不用加"" * * */ my$("j_cbAll").onclick=function(){ if(j_cbAll.checked) { for(var i=0;i<all.length;i++) { all[i].checked=true; } } else{ for(var i=0;i<all.length;i++) { all[i].checked=false; } } } //实现2 选择所有的子选框 全选框勾选 var arr=[]; for(var i=0;i<all.length;i++) { all[i].onclick=function(){ //思路过程 /** * 创建数组 * 点击每个子选框 * 1.数组清零 * 2.fou循环所有自选框 判断是否被选中(all[i].checked) 选中的元素加入新的数组(arr.push(all[i]))里面 * 3.判断新的数组长度是否等于子选框数组长度 是的话 全选框被选中(my$("j_cbAll").checked=true) 否则相反 */ arr=[]; for(var i=0;i<all.length;i++) if(all[i].checked) { arr.push(all[i]); } console.log(arr.length); if(arr.length==all.length){ my$("j_cbAll").checked=true; } else{ my$("j_cbAll").checked=false; } } } </script> <!-- <script src="jquery-1.12.4.js"></script> <script> $(function () { $("#j_cbAll").click(function () { //修改下面的哪些checkbox $("#j_tb input").prop("checked", $(this).prop("checked"));//根据自己来判断是否全选与否 }); $("#j_tb input").click(function () { if($("#j_tb input:checked").length == $("#j_tb input").length){ $("#j_cbAll").prop("checked", true) }else { $("#j_cbAll").prop("checked", false) } }); }); </script>
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { padding: 0; margin: 0; } .wrap { width: 300px; margin: 100px auto 0; } table { border-collapse: collapse; border-spacing: 0; border: 1px solid #c0c0c0; width: 300px; } th, td { border: 1px solid #d0d0d0; color: #404060; padding: 10px; } th { background-color: #09c; font: bold 16px "微软雅黑"; color: #fff; } td { font: 14px "微软雅黑"; } tbody tr { background-color: #f0f0f0; text-align: center; } tbody tr:hover { cursor: pointer; background-color: #fafafa; } </style> </head> <body> <div class="wrap"> <table> <thead> <tr> <th> <input type="checkbox" id="j_cbAll"/> </th> <th>菜名</th> <th>饭店</th> </tr> </thead> <tbody id="j_tb"> <tr> <td> <input type="checkbox"/> </td> <td>红烧肉</td> <td>田老师</td> </tr> <tr> <td> <input type="checkbox"/> </td> <td>西红柿鸡蛋</td> <td>田老师</td> </tr> <tr> <td> <input type="checkbox"/> </td> <td>红烧狮子头</td> <td>田老师</td> </tr> <tr> <td> <input type="checkbox"/> </td> <td>日式肥牛</td> <td>田老师</td> </tr> </tbody> </table> </div> <script type="text/javascript"> function my$(id) { return document.getElementById(id); } var all=my$("j_tb").getElementsByTagName("input"); // alert(all.length); //实现1 点击全选 子选框都得被全选 /** * * 点击全选框 判断全选框的checked是否为真 为真 遍历所有子选框 设置所有子选框的checked=true; true不用加"" * * */ my$("j_cbAll").onclick=function(){ if(j_cbAll.checked) { for(var i=0;i<all.length;i++) { all[i].checked=true; } } else{ for(var i=0;i<all.length;i++) { all[i].checked=false; } } } //实现2 选择所有的子选框 全选框勾选 var arr=[]; for(var i=0;i<all.length;i++) { all[i].onclick=function(){ //思路过程 /** * 创建数组 * 点击每个子选框 * 1.数组清零 * 2.fou循环所有自选框 判断是否被选中(all[i].checked) 选中的元素加入新的数组(arr.push(all[i]))里面 * 3.判断新的数组长度是否等于子选框数组长度 是的话 全选框被选中(my$("j_cbAll").checked=true) 否则相反 */ arr=[]; for(var i=0;i<all.length;i++) if(all[i].checked) { arr.push(all[i]); } console.log(arr.length); if(arr.length==all.length){ my$("j_cbAll").checked=true; } else{ my$("j_cbAll").checked=false; } } } </script> <!-- <script src="jquery-1.12.4.js"></script> <script> $(function () { $("#j_cbAll").click(function () { //修改下面的哪些checkbox $("#j_tb input").prop("checked", $(this).prop("checked"));//根据自己来判断是否全选与否 }); $("#j_tb input").click(function () { if($("#j_tb input:checked").length == $("#j_tb input").length){ $("#j_cbAll").prop("checked", true) }else { $("#j_cbAll").prop("checked", false) } }); }); </script> --> </body> </html>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
- Android减包 - 减少APK大小
- 一大拨漏洞来袭,eBAY的黑色星期五
- 基于 Docker 持续交付平台建设的实践
- Struts原理与实践
- 玩转WiFi Pineapple之看我如何优雅的盗取CMCC账号
- iOS多边形马赛克的实现(下)
- 见招拆招:绕过WAF继续SQL注入常用方法
- 从零开始在Python中实现决策树算法
- 走进科学:揭秘如何入侵电视机
- iOS多边形马赛克的实现(上)
- Android终端上视频转GIF的实现及GIF质量讨论
- Android手机上用户操作模拟方法的研究与实现
- Firefox内存释放重用漏洞高级利用(Pwn2Own2014、CVE-2014-1512)
- android 线程那点事
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法