JS-单按钮控制全选与取消全选

预览图片：

代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>全选、全不选、反选按钮设计</title>
    </head>
    <body>
        <h3>全选、全不选、反选按钮设计</h3>
        <!-- 按钮 -->
        <input type="button" onclick="check()" name="" id="btn" value="全选" /><br>
        <input type="button" onclick="revSelect()" name="" id="" value="反选" /><br>
        <input type="checkbox" class="box" name="cbs" value="1" />阿里
        <input type="checkbox" class="box" name="cbs" value="2" />腾讯
        <input type="checkbox" class="box" name="cbs" value="3" />百度
        <input type="checkbox" class="box" name="cbs" value="4" />字节跳动
        <input type="checkbox" class="box" name="cbs" value="5" />华为
        <input type="checkbox" class="box" name="cbs" value="6" />小米
        <input type="checkbox" class="box" name="cbs" value="7" />Apple
        <input type="checkbox" class="box" name="cbs" value="8" />联想

        <script type="text/javascript">
            // 单按钮
            function check() {
                var btn = document.getElementById("btn")
                if (btn.value == "全选") {
                    var selected = document.getElementsByName("cbs")
                    for (var i = 0; i < selected.length; i++) {
                        selected[i].checked = true
                    }
                    btn.value = "取消全选"
                } else {
                    var selected = document.getElementsByName("cbs")
                    for (var i = 0; i < selected.length; i++) {
                        selected[i].checked = false
                    }
                    btn.value = "全选"
                }
            }
            // 反选
            function revSelect() {
                var selected = document.getElementsByName("cbs")
                // console.log(selected)
                for (var i = 0; i < selected.length; i++) {
                    // 直接取反
                    selected[i].checked = !selected[i].checked
                }
            }
        </script>
    </body>
</html>
posted @ 2021-07-07 17:24  Freeyn  阅读(278)  评论(0)    收藏  举报