JavaScript零基础入门--笔记动力节点最新老杜(七）全套笔记精髓

最新推荐文章于 2025-02-17 14:10:55 发布

听~宇

最新推荐文章于 2025-02-17 14:10:55 发布

阅读量1.4k

点赞数

分类专栏：前端三件套文章标签： java

本文链接：https://blog.youkuaiyun.com/qq_47518713/article/details/124079547

版权

复选框的全选和取消全选

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script type="text/javascript">
        window.onload = function(){

            var aihaos = document.getElementsByName("aihao");
            var firstChk = document.getElementById("firstChk");
            firstChk.onclick = function(){
                //点击全选框则全选
                for(var i = 0; i < aihaos.length; i++){
                    aihaos[i].checked = firstChk.checked;
                }
            }

            // 对以上数组进行遍历
            var all = aihaos.length;
            //第一个for循环是页面加载绑定aihao[i],但不会主动执行它的onclick
            //第二个for循环是用来检测选中元素的数量
            for(var i = 0; i < aihaos.length; i++){
                //点击一下单选框
                aihaos[i].onclick = function(){
                    var checkedCount = 0;
                    // 总数量和选中的数量相等的时候,第一个复选框选中.
                    for(var i = 0; i < aihaos.length; i++){
                        if(aihaos[i].checked){
                            //遍历所有选项，如果选中则加1
                            checkedCount++;
                        }
                    }
                    //如果全选了则firstChk则调用checked选中
                    firstChk.checked = (all == checkedCount);
                    /*
                    if(all == checkedCount){
                        firstChk.checked = true;
                    }else{
                        firstChk.checked

最低0.47元/天解锁文章