原生js实现复选框的全选，取消全选，当子选项改变时会影响全选框的选种状态

最新推荐文章于 2021-10-27 21:09:21 发布

HadwinLing

最新推荐文章于 2021-10-27 21:09:21 发布

阅读量257

点赞数 1

分类专栏：前端文章标签： js javascript

本文链接：https://blog.csdn.net/Alingyuzi/article/details/103879268

版权

前端专栏收录该内容

17 篇文章 0 订阅

订阅专栏

原生js实现复选框的全选，取消全选，当子选项改变时会影响全选框的选种状态

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function chkAll() {
            var chk = document.getElementById("chk");
            // console.log(chk.checked);
            var chkAlls = document.getElementsByClassName("chk1");
            // console.log(chkAlls.length);
            for (var i = 0; i < chkAlls.length; i++) {
                chkAlls[i].checked = chk.checked;
                // console.log(chkAlls[i].checked);
            }
        }
        function chkAll1(){
            var chk = document.getElementById("chk");
            var chkAlls = document.getElementsByClassName("chk1");
            var sum=0;
            var k;
            for(var i=0;i<chkAlls.length;i++){
                if(chkAlls[i].checked==true){
                    sum++
                }else{
                    k=i;
                }
            }
            if(sum==4){
                chk.checked = true;

            }else{
                chk.checked=false;
            }

        }
    </script>
</head>
<body>
<table>
    <tr>
        <td><input type="checkbox" id="chk" onclick="chkAll()">全选</td>
    </tr>
    <tr>
        <td><input type="checkbox" class="chk1" onclick="chkAll1()"></td>
    </tr>
    <tr>
        <td><input type="checkbox" class="chk1" onclick="chkAll1()"></td>
    </tr>
    <tr>
        <td><input type="checkbox" class="chk1" onclick="chkAll1()"></td>
    </tr>
    <tr>
        <td><input type="checkbox" class="chk1" onclick="chkAll1()"></td>
    </tr>
</table>
</body>
</html>

HadwinLing

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
原生js实现复选框的全选，取消全选，当子选项改变时会影响全选框的选种状态

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script> function chkAll() { var chk = doc...
复制链接

扫一扫