js 全选/全不选/反选

可能20+岁

于 2021-05-31 21:18:23 发布

阅读量79

点赞数

文章标签： js dom

本文链接：https://blog.csdn.net/qq_46069657/article/details/117430092

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        //全选

    function checkAll(){
        var hobbys = document.getElementsByName("hobby");
        for(var i= 0;i < hobbys.length;i ++)
        {
            hobbys[i].checked = true;
        }
    }
    //全不选
    function checknobody(){
        var hobbys = document.getElementsByName("hobby");
        for(var i= 0;i < hobbys.length;i ++)
        {
            hobbys[i].checked = false;
        }
    }
    //反选
    function checkreverse(){
        var hobbys = document.getElementsByName("hobby");
        for (var i = 0;i < hobbys.length;i ++){
            if(hobbys[i].checked==true){
                hobbys[i].checked = false;
            }else{
                hobbys[i].checked = true;
            }
        }

    }

    </script>
</head>
<body>
    <input type="checkbox" value="cpp" name="hobby">c++
    <input type="checkbox" value="java" name="hobby">java
    <input type="checkbox" value="python" name="hobby">python
    <button onclick="checkAll()">全选</button>
    <button onclick="checknobody()">全不选</button>
    <button onclick="checkreverse()">反选</button>

</body>
</html>