HTML+JavaScript制作的复选框的demo,全选,全不选,反选

最新推荐文章于 2021-11-26 17:27:50 发布

小云　　　　

最新推荐文章于 2021-11-26 17:27:50 发布

阅读量224

点赞数 1

分类专栏： html 文章标签： javascript js checkbox html5

本文链接：https://blog.csdn.net/lq24244/article/details/115742599

版权

html 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

HTML+JavaScript制作的复选框的demo,全选,全不选,反选

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        window.onload = function () {
            var i;
            var li = document.getElementsByTagName("input");
            var quanxuan = document.getElementById("quanxuan");
            var quan = document.getElementById("quan");
            var quanbu = document.getElementById("quanbu");
            var fanxuan = document.getElementById("fanxuan");
            var fruit = document.getElementsByClassName("fruit");
            var tijiao = document.getElementById("tijiao");


            //全选和全不选框
            quanxuan.onclick = function () {
                for (i = 0; i < li.length; i++) {
                    li[i].checked = this.checked;
                }
            }
            //按钮全选
            quan.onclick = function () {
                for (i = 0; i < li.length; i++) {
                    li[i].checked = true;
                }
            }
            //按钮全不选
            quanbu.onclick = function () {
                for (i = 0; i < li.length; i++) {
                    li[i].checked = false;
                }
            }
            //按钮反选
            fanxuan.onclick = function () {
                for (i = 0; i < li.length; i++) {
                    li[i].checked = !li[i].checked;
                }
                for (i = 0; i < fruit.length; i++) {
                    if (!fruit[i].checked) {
                        quanxuan.checked = false;
                        return;
                    }
                }
            }
            //给所有水果选项绑定单击事件
            for (i = 0; i < fruit.length; i++) {
                fruit[i].onclick = function () {
                    for (var j = 0; j < fruit.length; j++) {
                        if (!fruit[j].checked) {
                            quanxuan.checked = false;
                            return;
                        }
                    }
                    quanxuan.checked = true;
                }
            }
            
            //提交按钮
            tijiao.onclick = function () {
                for (i = 0; i < fruit.length; i++) {
                    if (fruit[i].checked) {
                        alert(fruit[i].value)
                    }
                }

            }
        }
    </script>
</head>
<body>
<input type="checkbox" id="quanxuan"/>全选
<ul>
    <li><input type="checkbox" class="fruit" value="苹果"/>苹果</li>
    <li><input type="checkbox" class="fruit" value="香蕉"/>香蕉</li>
    <li><input type="checkbox" class="fruit" value="樱桃"/>樱桃</li>
    <li><input type="checkbox" class="fruit" value="梨子"/>梨子</li>
</ul>
<button id="quan">全选</button>
<button id="quanbu">全不选</button>
<button id="fanxuan">反选</button>
<button id="tijiao">提交</button>
</body>
</html>

小云　　　　

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
HTML+JavaScript制作的复选框的demo,全选,全不选,反选

HTML+JavaScript制作的复选框的demo,全选,全不选,反选<!DOCTYPE html><html lang="zh_CN"><head> <meta charset="UTF-8"> <title>Title</title> <script> window.onload = function () { var i;
复制链接

扫一扫