js案例-3 复选框checkbox的全选返回控制

来源：互联网发布：深圳php好找工作吗编辑：程序博客网时间：2024/04/30 22:47
<!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++){                    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;                            break;                        }                    }                    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