原生作业--全选反选

最新推荐文章于 2023-01-14 14:33:20 发布

m0_49923542

最新推荐文章于 2023-01-14 14:33:20 发布

阅读量196

点赞数

分类专栏：功能文章标签： js

本文链接：https://blog.csdn.net/m0_49923542/article/details/108663185

版权

功能专栏收录该内容

4 篇文章 0 订阅

订阅专栏

原生作业–全选反选

代码如下：

<body>

<button id="btn1">全选</button>
<button id="btn2">反选</button>
<button id="btn3">取消</button>

<ul id="chk">
    <li><input type="checkbox">选项</li>
    <li><input type="checkbox">选项</li>
    <li><input type="checkbox">选项</li>
    <li><input type="checkbox">选项</li>
    <li><input type="checkbox">选项</li>
</ul>

<script>
    var btns = document.getElementsByTagName("button");
    var input = document.getElementsByTagName("input");

    // function $(checkbox) {
    //     return document.getElementById(checkbox);
    // }

    btns[0].onclick = function () {               //$("btn1").onclick=function(){
        for (i = 0; i < input.length; i++) {
            input[i].checked = true;
        }
    }

    btns[1].onclick = function () {
        for (i = 0; i < input.length; i++) {
            if (input[i].checked == true) {     //input[i].checked=!input[i].checked
                input[i].checked = false;
            } else{
                input[i].checked = true;
            }
        }
    }

    btns[2].onclick = function () {
        for (i = 0; i < input.length; i++) {
            input[i].checked = false
        }
    }

</script>

示图如下：
在这里插入图片描述

m0_49923542

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
原生作业--全选反选

原生作业–全选反选代码如下：<body><button id="btn1">全选</button><button id="btn2">反选</button><button id="btn3">取消</button><ul id="chk"> <li><input type="checkbox">选项</li> <li><inpu
复制链接

扫一扫