全选和反选
来源:互联网 发布:datagridview添加数据 编辑:程序博客网 时间:2024/05/02 02:50
全选和反选
<!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; } tbody tr:hover { cursor: pointer; background-color: #fafafa; } </style> <script> window.onload = function () { //需求1:点击上面的的input,下面全选或者反选。 //思路:获取了上面的input按钮,只需要判断,checked属性是true还是false,如果是true,下面的全部变成true;false同理。 //老三步 var topInp = document.getElementById("theadInp"); var tbody = document.getElementById("tbody"); var botInpArr = tbody.getElementsByTagName("input"); //绑定事件 topInp.onclick=function( ){ //最初版 // for(var i=0;i<botInpArr.length;i++){ // if(topInp.checked==true){ // botInpArr[i].checked=true; // }else{ // botInpArr[i].checkes=false; // } // } //优化版(被点击的input按钮的checked属性值,应该直接作为下面的所有的input按钮的checked属性值) for(var i=0;i<botInpArr.length;i++){ botInpArr[i].checked=this.checked; } } //需求2:点击下面的input,如果下面的全部选定了,上面的全选,否则相反 //思路:为下面的每一个input绑定事件,每点击一次都判断所有的按钮 //checked属性值是否全部都是true,如果有一个false 那么上面的input的checked属性也是false;都是true,topInp的checked就是true for(var i=0;i<botInpArr.length;i++){ botInpArr[i].onclick=function( ){ //开闭原则 var bool=true; //检测每一个input的checked属性值 for(var j=0;j<botInpArr.length;j++){ if(botInpArr[j].checked===false){ bool=false; } } topInp.checked=bool; } } } </script></head><body> <div class="wrap"> <table> <thead> <tr> <th> <input type="checkbox" id="theadInp" /> </th> <th>菜名</th> <th>饭店</th> </tr> </thead> <tbody id="tbody"> <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></body></html>
0 0
- 全选和反选
- 全选和反选
- 全选和反选
- 全选和反选
- 全选和反选
- 全选和反选
- 全选和反选
- 全选和反选
- 全选和反选
- checkbox全选,反选和取消全选
- checkbox全选和反选
- javascript全选和反选
- 全选、全不选和反选
- select 全选和反选
- js全选和反选
- javascript全选和反选
- js全选和反选
- js全选和反选
- Leetcode 52. N-Queens II (Hard) (cpp)
- java中volatile关键字的含义
- Dagger2的使用(0):
- STL拾遗之map操作
- nload : 实时查看linux服务器网络流量的工具
- 全选和反选
- java多线程开发基础
- 如何方便快速在指定文件夹打开命令行
- 瀑布流
- mysql 查询基础知识
- 事件驱动程序设计
- 在oracle下触发器实现主键自增
- DocumentFragment
- 从锦绣未央讲起