javascript反选复选框

最新推荐文章于 2024-01-03 21:38:58 发布

大补bu

最新推荐文章于 2024-01-03 21:38:58 发布

阅读量400

点赞数

分类专栏： JavaScript练习文章标签： js javascript html html5

本文链接：https://blog.csdn.net/qq_31068787/article/details/106065167

版权

JavaScript练习专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul{
            margin: 0;
            padding: 0;
        }
        li{
            list-style: none;
        }
    </style>
</head>
<body>
    
    <ul>
        <li><input type="checkbox" id="qx">反选</li>   
        <li><input type="checkbox" >篮球</li>
        <li><input type="checkbox" >唱歌</li>
        <li><input type="checkbox" >音乐</li>
        <li><input type="checkbox" >火锅</li>
    </ul>
</body>
<script>
    var qx = document.querySelector('#qx');
    var ips = document.querySelectorAll('input');//获取所有input
    ips =  Array.from(ips).slice(1); //把对象转换成数组，从下标1截取到后面的，ES6语法
    qx.addEventListener('click',function(){
            if(qx.checked){ //反选选中的，其余复选框都选中
            for(var i =0;i<ips.length;i++){
                ips[i].checked = qx.checked
            }
        }else{
            for(var i =0;i<ips.length;i++){
                ips[i].checked = false
            }
        }
    })
    for(var i= 0;i<ips.length;i++){
        ips[i].onclick = function(){
             var cc = 0; //统计选中个数
            for(var j = 0;j<ips.length;j++){
                if(ips[j].checked){
                    cc++
                }
            }
            if(cc === ips.length){ //统计个数等于数组长度是反选选中
                qx.checked = true
            }else{
                qx.checked = false
            }
        }
    }
</script>
</html>

在这里插入图片描述运行结果

大补bu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript反选复选框

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> ul{ ma
复制链接

扫一扫

专栏目录