实现复选框的多选功能

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/yingleiming/article/details/79974671
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>管理员列表</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        table{
            width: 500px;
            margin:auto;
            border-collapse: collapse;
        }
        th,td{
            text-align: center;
            border:1px solid #000;
        }
        h1{
            text-align: center;
            margin:100px 0 20px 0;
        }
    </style>

</head>
<body>

<h1>管理员列表</h1>

<table id="data">
    <thead>
        <tr>
            <th>
                <input name="choose" type="checkbox" class="checked" value="全选" onclick="selectAll(this)">
            </th>
            <th>管理员ID</th>
            <th>姓名</th>
            <th>操作</th>
        </tr>
    </thead>
    <tbody>
    <tr>
        <td><input name="choose" type="checkbox"></td>
        <td>1</td>
        <td>Tester</td>
        <td>
            <button>修改</button>
            <button>删除</button>
        </td>
    </tr>
    <tr>
        <td><input name="choose" type="checkbox"></td>
        <td>2</td>
        <td>Manager</td>
        <td>
            <button>修改</button>
            <button>删除</button>
        </td>
    </tr>
    <tr>
        <td><input name="choose" type="checkbox"></td>
        <td>3</td>
        <td>Analyst</td>
        <td>
            <button>修改</button>
            <button>删除</button>
        </td>
    </tr>
    <tr>
        <td><input name="choose" type="checkbox"></td>
        <td>4</td>
        <td>Admin</td>
        <td>
            <button>修改</button>
            <button>删除</button>
        </td>
    </tr>
    </tbody>
</table>

<script>
//    全选或者取消全选
    function selectAll(chb) {
//        获得id为data的table下tbody下的tr下的第一个td中的input,保存在变量chbs中
        var data=document.getElementById("data");
        chbs=data.querySelectorAll("tbody>tr>td:first-child>input");

//        遍历chbs中的每一个chb
        for(var i=0;i<chbs.length;i++){
//            设置当前chb的checked等于chb的checked
            chbs[i].checked=chb.checked;
        }
    }
    window.onload=function () {
//        获得id为data的table下tbody下的tr下的第一个td中的input,保存在变量chbs中
        var data=document.getElementById("data");
        chbs=data.querySelectorAll("tbody>tr>td:first-child>input");
//        遍历chbs中的每一个chb
        for(var i=0;i<chbs.length;i++){
//            设置当前chb的onclick=selectOne;
            chbs[i].onclick=selectOne;

        }
    }
    function selectOne() {//选中或取消选中一个chb
//        this-->当前选中的chb
//        获得data下thead下的第一个th下的input,保存在变量selAll中
        var selAll=data.querySelector("thead>tr>th:first-child>input");
//        如果当前chb的checked是false
        if(this.checked==false){
//            将selAll的checked改为false
            selAll.checked=false;
        }else {//否则
//            获得id为data下的tbody下tr下的第一个td中的input,保存在变量chbs中
            var chbs=data.querySelectorAll("tbody>tr>td:first-child>input");
            for(var i=0;i<chbs.length;i++){//遍历chbs下每个chb
//                如果当前chb没有被选中,则直接返回
                if(chbs[i].checked==false){return}
            }//遍历结束
//            将selAll的checked改为true
            selAll.checked=true;
        }
    }

</script>
</body>
</html>
阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页