js实现全选按钮

最新推荐文章于 2023-11-04 00:15:12 发布

把队友挂树上

最新推荐文章于 2023-11-04 00:15:12 发布

阅读量330

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/m0_61703542/article/details/124960231

版权

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript">
        window.onload = function() {
            //全选按钮
            var items = document.getElementsByName("item");
            var SelectAll = document.getElementById("SelectAll");
            SelectAll.onclick = function() {
                    for (var i = 0; i < items.length; i++) {
                        items[i].checked = true;
                    }
                    checkAllBox.checked = true;
                }
                //全不选按钮
            var SelectNotAll = document.getElementById("SelectNotAll");
            SelectNotAll.onclick = function() {
                    for (var i = 0; i < items.length; i++) {
                        items[i].checked = false;
                    }
                    checkAllBox.checked = false;
                }
                //反选按钮
            var Reverse = document.getElementById("Reverse");
            Reverse.onclick = function() {
                    checkAllBox.checked = true;
                    for (var i = 0; i < items.length; i++) {
                        items[i].checked = !items[i].checked;
                        if (!items[i].checked) {
                            checkAllBox.checked = false;
                        }
                    }
                }
                //提交按钮
            var Submit = document.getElementById("Submit");
            Submit.onclick = function() {
                    for (var i = 0; i < items.length; i++) {
                        if (items[i].checked) {
                            console.log(items[i].value);
                        }
                    }
                }
                //全选/全不选
            var checkAllBox = document.getElementById("checkAllBox");
            checkAllBox.onclick = function() {
                    for (var i = 0; i < items.length; i++) {
                        items[i].checked = this.checked;
                    }
                }
                //items
            for (var i = 0; i < items.length; i++) {
                items[i].onclick = function() {
                    checkAllBox.checked = true;
                    for (var j = 0; j < items.length; j++) {
                        if (items[j].checked) {
                            checkAllBox.checked = false;
                            break;
                        }
                    }
                }
            }
        }
    </script>
</head>

<body>
    <!-- 全选/全不选 -->
    <!-- 足球 篮球 排球 羽毛球 -->
    <!-- 全选按钮 全不选按钮 反选按钮 提交按钮 -->
    <form action="post">
        你爱好的运动是？<input type="checkbox" id="checkAllBox" value="全选/全不选">全选/全不选
        </br>
        <input type="checkbox" name="item" value="足球">足球
        <input type="checkbox" name="item" value="篮球">篮球
        <input type="checkbox" name="item" value="排球">排球
        <input type="checkbox" name="item" value="羽毛球">羽毛球
        </br>
        <input type="button" id="SelectAll" value="全选">
        <input type="button" id="SelectNotAll" value="全不选">
        <input type="button" id="Reverse" value="反选">
        <input type="button" id="Submit" value="提交">
    </form>
</body>

</html>

把队友挂树上

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js实现全选按钮

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>D.
复制链接

扫一扫