JavaScript-全选-全不选-反选

最新推荐文章于 2024-09-10 06:15:30 发布

chengjiexing7464

最新推荐文章于 2024-09-10 06:15:30 发布

阅读量160

点赞数 1

文章标签： javascript ViewUI

原文链接：https://my.oschina.net/u/4118325/blog/3046073

版权

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>

</head>
<body>
<!--
需求:
    1.写三个按钮：
        第一个全选
        第二个取消全选
        第三个反选
    2.统计，当前选中了多少首歌曲：“当前选中9首，共14首”
-->
<script type="application/javascript">

    function setALL(){//选择全选
        var a  = document.getElementsByName("song");//先获取input多选框
        //获取的a是个数组，遍历这个数组，设置checked属性
        for(var i = 0;i< a.length;i++){//因为获取到的是多个选择框，是数组类型的所以使用时需要将它们遍历出来
            a[i].checked = true;//checked为true时是选中，false时是未选中，遍历的同时设置为选择状态
        }
        getCount();
    }
    function setNone(){//取消全选
        var a=document.getElementsByName("song");//先获取input多选框
        for(var i = 0; i<a.length;i++){//循环遍历
            a[i].checked=false;
        }
        getCount();
    }
    function setBack(){//反选
        var c = document.getElementsByName("song");//先获取input多选框
        for(var i = 0;i< c.length;i++){//循环遍历
            if(c[i].checked==true){//if语句判断是否为选择状态，根据选择状态取反，整个if语句可用代替：c[i].checked = !c[i].checked;
                c[i].checked=false;
            }else{
                c[i].checked=true;
            }
        }
        getCount();
    }

    window.onload = function (){//事件：用户点击时触发，如选歌曲时
        var allsongs = document.getElementsByName("song");
        for (var i = 0; i < allsongs.length; i++) {
            allsongs[i].onclick = function(){
                getCount();
            }
        }
    }

    function getCount(){//方法用于计数歌曲
        var counter = 0;
        var allsongs = document.getElementsByName("song");
        for (var i = 0; i < allsongs.length; i++) {//循环
            if (allsongs[i].checked) {//判断是否选中
                counter++;//计数
            }
        }
        document.getElementById("myDiv").innerText = "当前选中"+counter+"首歌曲，共"+allsongs.length+"首。";
    }


    function setTow(type){//这是优化后的：将多个循环合并
        var allsongs = document.getElementsByName("song");
        for(var i =0;i<allsongs.length;i++){
            if(type==0){
                allsongs[i].checked = true;
            }else if(type==1){
                allsongs[i].checked = false;
            }else if(type==2){
                allsongs[i].checked = !allsongs[i].checked;
            }
        }
        getCount();//每次点击都调用计数方法
    }

</script>
<input type="button" value="全选0" οnclick="setALL()"/>
<input type="button" value="取消全选0" οnclick="setNone()"/>
<input type="button" value="反选0" οnclick="setBack()"/>
<hr/>
<input type="button" value="全选1" οnclick="setTow(0)"/>
<input type="button" value="取消全选1" οnclick="setTow(1)"/>
<input type="button" value="反选1" οnclick="setTow(2)"/>
<hr/>
<input type="checkbox" name="song"/> 铁血丹心<br/>
<input type="checkbox" name="song"/> 火<br/>
<input type="checkbox" name="song"/> 大海<br/>
<input type="checkbox" name="song"/> 好汉歌<br/>
<input type="checkbox" name="song"/> 我们不一样<br/>
<input type="checkbox" name="song"/> 成都<br/>
<input type="checkbox" name="song"/> 半壶纱<br/>
<input type="checkbox" name="song"/> 你还要我怎样<br/>
<input type="checkbox" name="song"/> 一生所爱<br/>
<input type="checkbox" name="song"/> 追光者<br/>
<div id="myDiv"></div>
</body>
</html>

转载于:https://my.oschina.net/u/4118325/blog/3046073