js案例练习——表单全选_取消全选

飞天小女侠~

已于 2022-03-29 09:39:11 修改

阅读量398

点赞数 1

分类专栏：前端案例练习文章标签： javascript html css

于 2022-03-08 17:55:18 首次发布

本文链接：https://blog.csdn.net/xuan971130/article/details/123358747

版权

前端案例练习专栏收录该内容

29 篇文章 2 订阅

订阅专栏

效果：

案例分析：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单全选_取消全选</title>
    <style>
        th {
            color: white;
        }
        thead {
            height: 30px;
            background-color: skyblue;
        }
        td {
            height: 30px;
            text-align: center;
            background-color: beige;
            width: 80px;
        }
    </style>
</head>
<body>
    <table>
        <thead>
            <tr>
                <th><input type="checkbox" id = "all"></th>
                <th>商品</th>
                <th>价钱</th>
            </tr>
        </thead>
        <tbody id="j_body" >
            <tr>
                <td><input type="checkbox"></td>
                <td>ipone8</td>
                <td>8000</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>ipone8</td>
                <td>8000</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>ipone8</td>
                <td>8000</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>ipone8</td>
                <td>8000</td>
            </tr>
        </tbody>
    </table>
    <script>
        //1.全选和取消全选的做法：
        var id_all = document.getElementById('all');
        var j_tbs = document.getElementById('j_body').getElementsByTagName('input');
        //注册事件
        id_all.onclick = function(){
            //this.checked 可以得到复选框的选中状态，选中的为true，未选中的为false
            if(this.checked==true){
                for(var i =0;i<j_tbs.length;i++){
                    j_tbs[i].checked=true;
                }
            }else{
                for(var i =0;i<j_tbs.length;i++){
                    j_tbs[i].checked=false;
                }
            }
            //或者不用判断，直接让下面的框的checked值与上面的值相同即可
            // for(var i =0;i<j_tbs.length;i++){
            //       j_tbs[i].checked=this.checked;
            //  }
        }
        //给tbody的所有复选框加绑定事件，选中一个，则循环查看其他复选框的选中状态。然后再看最上面的复选框要不要选中。
//或者是设置flag=true，一旦下方表格中有false，设flag=false直接跳出循环，让上面的框的checked=flag
        for(var i = 0;i<j_tbs.length;i++){
            j_tbs[i].onclick = function(){
                var flag = 0;
                for(var j=0;j<j_tbs.length;j++){
                    if(j_tbs[j].checked==true){
                        flag++;
                    }
                }
                if(flag==j_tbs.length){
                    id_all.checked = true
                }else{
                    id_all.checked = false;
                }
            }
        }


    </script>
</body>
</html>

飞天小女侠~

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
js案例练习——表单全选_取消全选

效果：案例分析：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&g..
复制链接

扫一扫

专栏目录