用js写全选，单选复选框（多种方法）

第一种 用for循环
复制代码
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8     <title>Document</title>
 9     <style>
10         .qin {
11             display: flex;
12             flex-direction: column;
13         }
14     </style>
15 </head>
16 
17 <body>
18     <div class="qin">
19         <span><input type="checkbox" id="qi">全选</span>
20         <span><input type="checkbox" name="qinq">Es6技术应用</span>
21         <span><input type="checkbox" name="qinq">微信小程序</span>
22         <span><input type="checkbox" name="qinq">Vue.js框架</span>
23         <span><input type="checkbox" name="qinq">react框架</span>
24         <span><input type="checkbox" name="qinq">ElementUl</span>
25         <span><input type="checkbox" name="qinq">vant</span>
26         <span><input type="checkbox" name="qinq">Bootstrap</span>
27     </div>
28     <script>
29        let qa = document.getElementById("qi")
30         let zx = document.getElementsByClassName("qinq")
31         qa.onclick = function () {
32             for (let i = 0; i < zx.length; i++) {
33                zx[i].checked=this.checked
34               
35             }
36         }
37      for(let j=0; j<zx.length;j++){
38         zx[j].onclick=function(){
39             let flag=true;
40             for(let k=0;k<zx.length;k++){
41                 if(zx[k].checked==false){
42                     flag=false
43                 }
44             }
45             qa.checked=flag
46         }
47      } 
48 
49     </script>
50 </body>
51 
52 </html>
复制代码

第二种  用forEach方法

复制代码
 1   let qa = document.getElementById("qi")
 2         let zx = document.getElementsByName("qinq")
 3         qa.onclick = function(){
 4             zx.forEach(ele=>{
 5                 ele.checked = this.checked
 6             })
 7         }
 8         zx.forEach(zxa=>{
 9             zxa.onclick=function(){
10                 let can = 0
11                 zx.forEach(ele=>{
12                     if(ele.checked){can++}
13                 })
14                 qa.checked=zx.length==can?true:false
15             }
16         }) 
17
复制代码

第三种 用some方法

复制代码
   
<script>
 let qa = document.getElementById("qi")
        let zx = document.getElementsByName("qinq")
        qa.onclick = function(){
            zx.forEach(ele=>{
                ele.checked = this.checked
            })
        }
        zx.forEach(zxa=>{
            zxa.onclick=function(){
                let can = 0
                zx.forEach(ele=>{
                    let flag=[ele].some(function(item,index){
                        return item.checked
                    })
                    qa.checked = flag
                })
               
            }
        })
       let arr= [12,21,12,15,12,21,31,54]
        function con(arr){
        for(let i=0;i<arr.length;i++){
            for(let j=i+1;j<arr.length;j++){
                if(arr[i]==arr[j]){
                    arr.splice(j,1)
                    j--;
                }
            }
        }
        return arr
    }
    console.log(con(arr)); 

    </script>
复制代码

 

posted @   倾心一刻  阅读(19)  评论(0)  编辑  收藏  举报
相关博文：
· 用jquery单击切换颜色
· 用js进行加法计算
· js复选框之全选&&反选&&不选
· js实现全选 全不选 反选 复选 提交
· 复选框的操作，看这一篇就够啦~~
阅读排行：
· 无需6万激活码！GitHub神秘组织3小时极速复刻Manus，手把手教你使用OpenManus搭建本
· Manus爆火，是硬核还是营销？
· 终于写完轮子一部分：tcp代理 了，记录一下
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
· 单元测试从入门到精通
点击右上角即可分享
微信分享提示