全选反选练习

最新推荐文章于 2023-09-25 21:32:47 发布

lixiaomi_sunshine

最新推荐文章于 2023-09-25 21:32:47 发布

阅读量294

点赞数

分类专栏：前端 js 文章标签： js js事件表单

本文链接：https://blog.csdn.net/love07070707/article/details/54428941

版权

前端同时被 2 个专栏收录

19 篇文章 0 订阅

订阅专栏

15 篇文章 0 订阅

订阅专栏

<body>
    <form action="">
    <!-- 全选 /全不选/反选-->
        <input type="checkbox" name="love" />篮球<br />
        <input type="checkbox" name="love" />足球<br />
        <input type="checkbox" name="love" />冰球<br />
        <input type="checkbox" name="love" />排球<br />
        <input type="button" value="全选" onclick="setAll()" />
        <input type="button" value="全不选" onclick="setNo()" />
        <input type="button" value="反选" onclick="judeg()" />
    </form>
</body>
<script type="text/javascript">
    // 思路：全选：获取名称是love的所有input标签
    // 循环遍历，为了拿到每一个input标签，同时，设置checked
    function setAll(){
        var inputs = document.getElementsByName("love");
        for(var i = 0;i < inputs.length;i++){
            inputs[i].checked = true;
        }
    }
    function setNo(){
        var inputs = document.getElementsByName("love");
        for(var i = 0;i < inputs.length;i++){
            inputs[i].checked = false;
        }
    }
    function judeg(){
        var inputs = document.getElementsByName("love");
        for(var i = 0;i < inputs.length;i++){
            if(inputs[i].checked == false)
                inputs[i].checked = true;
            else{
                inputs[i].checked = false;
            }
        }
    }
</script>