JavaEE
鸿蒙应用开发
HTML&JS+前端
Python+大数据开发
人工智能开发
AI+设计
软件测试
新媒体+短视频
集成电路应用开发
更新时间:2019年07月26日 11时17分26秒 来源:黑马程序员论坛
|
注意点 在获取子选框的时候别加上 全选框的个数了 技巧 找 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> |
推荐了解热门学科
| java培训 | Python人工智能 | Web前端培训 | PHP培训 |
| 区块链培训 | 影视制作培训 | C++培训 | 产品经理培训 |
| UI设计培训 | 新媒体培训 | 产品经理培训 | Linux运维 |
| 大数据培训 | 智能机器人软件开发 |
传智播客是一家致力于培养高素质软件开发人才的科技公司，“黑马程序员”是传智播客旗下高端IT教育品牌。自“黑马程序员”成立以来，教学研发团队一直致力于打造精品课程资源，不断在产、学、研3个层面创新自己的执教理念与教学方针，并集中“黑马程序员”的优势力量，针对性地出版了计算机系列教材50多册，制作教学视频数+套，发表各类技术文章数百篇。
传智播客从未停止思考
传智播客副总裁毕向东在2019IT培训行业变革大会提到，“传智播客意识到企业的用人需求已经从初级程序员升级到中高级程序员，具备多领域、多行业项目经验的人才成为企业用人的首选。”
中级程序员和初级程序员的差别在哪里?
项目经验。毕向东表示，“中级程序员和初级程序员最大的差别在于中级程序员比初级程序员多了三四年的工作经验，从而多出了更多的项目经验。“为此，传智播客研究院引进曾在知名IT企业如阿里、IBM就职的高级技术专家，集中研发面向中高级程序员的课程，用以满足企业用人需求，尽快补全IT行业所需的人才缺口。
何为中高级程序员课程?
传智播客进行了定义。中高级程序员课程，是在当前主流的初级程序员课程的基础上，增加多领域多行业的含金量项目，从技术的广度和深度上进行拓展。“我们希望用5年的时间，打造上百个高含金量的项目，覆盖主流的32个行业。”传智播客课程研发总监于洋表示。
黑马程序员热门视频教程【点击播放】
| Python入门教程完整版（懂中文就能学会） | 零起点打开Java世界的大门 |
| C++| 匠心之作 从0到1入门学编程 | PHP|零基础入门开发者编程核心技术 |
| Web前端入门教程_Web前端html+css+JavaScript | 软件测试入门到精通 |