使用JavaScript实现复选框的全选和反选

最新推荐文章于 2020-03-26 15:11:09 发布

明快de玄米61

最新推荐文章于 2020-03-26 15:11:09 发布

阅读量226

点赞数

分类专栏： java学习之路

本文链接：https://blog.csdn.net/qq_42449963/article/details/103684957

版权

java学习之路专栏收录该内容

728 篇文章 56 订阅

订阅专栏

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单验证</title>
    <script type="text/javascript">
        window.onload = function () {
            var check = document.getElementById("check");
            var reverseCheck = document.getElementById("reverseCheck");
            check.onclick=function () {
                var checkBoxS = document.getElementsByName("checkBox");
                for (var i=0;i<checkBoxS.length;i++){
                    checkBoxS[i].checked=check.checked;
                }
            }
            reverseCheck.onclick=function () {
                var checkBoxS = document.getElementsByName("checkBox");
                for (var i=0;i<checkBoxS.length;i++){
                    checkBoxS[i].checked=!checkBoxS[i].checked;
                }
            }
        }
    </script>
</head>
<body>
    <input type="checkbox" id="check"/>全选
    <input type="checkbox" id="reverseCheck"/>反选
    <br/>
    <br/>
    <input type="checkbox" name="checkBox" />苹果
    <br/>
    <input type="checkbox" name="checkBox" />西瓜
    <br/>
    <input type="checkbox" name="checkBox" />香蕉
    <br/>
</body>
</html>

结果：
在这里插入图片描述

明快de玄米61

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
使用JavaScript实现复选框的全选和反选

代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>表单验证</title> <script type="text/javascript"> window.onload = fun...
复制链接

扫一扫