JS_全选反选

来源：互联网发布：matalab y引入数据编辑：程序博客网时间：2024/05/01 20:17
全选和反选

<!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