JS 全选选择

最新推荐文章于 2022-08-28 20:54:31 发布

甘乐2333

最新推荐文章于 2022-08-28 20:54:31 发布

阅读量238

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_35254240/article/details/90645873

版权

前端专栏收录该内容

61 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input type="checkbox" name="hobby" id="allCheck"><label for="allCheck">全选</label><br>
    <input type="checkbox" name="hobby"><br>
    <input type="checkbox" name="hobby"><br>
    <input type="checkbox" name="hobby"><br>
    <input type="checkbox" name="hobby"><br>
    <input type="checkbox" name="hobby"><br>
    <input type="checkbox" name="hobby"><br>
    <input type="checkbox" name="hobby"><br>
<script>


    /*
    *  1\获取所有input,并且转换成一个数组
    *  2\遍历这个数组,点击每个input执行函数
    *  3\查找当前被点击的元素是第几个,第0个是全选,其他是剩余所有input
    *  4\将除了全选以外的所有checkbox是否的选中的布尔值存储在arr数组中
    *  5\点击每个除了全选外的元素后,将这个元素是否选中存储在arr数组的对应位置
    *  6\点击的是全选时,遍历input数组所有的内容,让其他元素的选中项和全选相同
    *  7\将每次点击非全选按钮时判断当前是否需要全选或者取消全选
    *
    *
    *
    * */
    //所有的input
    var checks;
//    数组,用来存储除了全选的checkbox以外的所有其他checkbox是否被选中的数组
    var arr=[];
    init();
    function init() {
//        这样会获取一个类数组的列表
        checks=document.getElementsByName("hobby");
//        将类数组转换为数组
        checks=Array.from(checks);
//        遍历没有个input
        for(var i=0;i<checks.length;i++){
//          点击每个input,执行  clickHandler函数
            checks[i].onclick=clickHandler;
            if(i===0)continue;
//            因为全选是第一个,我们不存储是否全选
//            默认其他都是未被选中,checks[i]第几个checkbox,checked是否选中
            arr.push(checks[i].checked);
        }

    }

    function clickHandler(e) {
//        this是被点击的元素
//        在所有input数组中查找当前被点击的是第几个
        var index=checks.indexOf(this);
//        当点击的索引是第0个,就是全选
        if(index===0){
//            在数组的foreach中不能使用this,所以将全选存在变量中
            var allCheck=this;
//            变量所有input数组
            checks.forEach(function (t, index) {
                if(index===0) return;//如果index是0,那就是全选,跳出
//                allCheck是全选,让每一个input的选中值都和allCheck的选中值一致
//                这样,全选是什么,其他也就是什么
                t.checked=allCheck.checked;
//                数组arr它的第0就是checks的第一项对应选择,因此我们需要index-1
//                让数组arr中每一个值都是当前全选的值
                arr[index-1]=allCheck.checked;
            })
        }else{
//            这是除了全选以外每个input
//            点击每一个checkbox,存储数组中对应位置的当前是否被选中的值
//            因为全选不再该数组中,所以需要-1
            arr[index-1]=this.checked;
//            checks[0]就是全选的input,让全选设置为判断每个元素是否都选中了
            checks[0].checked=arr.every(function (t) {
                return t;
            })
        }
    }
</script>
</body>
</html>