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

81 阅读 0 评论 54 点赞

我是靠谱客的博主虚拟皮皮虾，最近开发中收集的这篇文章主要介绍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>