HTML+JS实现一组复选框的全选、取消、反选

最新推荐文章于 2024-04-02 19:39:43 发布

你的大数据学长

最新推荐文章于 2024-04-02 19:39:43 发布

阅读量4.4k

点赞数 7

本文链接：https://blog.csdn.net/qq_43198568/article/details/104333600

版权

HTML 专栏收录该内容

22 篇文章 8 订阅

订阅专栏

HTML+JS实现一组复选框的全选、取消、反选

预计效果
代码
关键代码解释
结果展示

预计效果

实现一组复选框的全选、反选、取消选中的功能，界面如下图
在这里插入图片描述

代码

该代码可在我的GitHub中找到，链接在此

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>一组复选框的全选、取消、反选</title>
    <script type="text/javascript">
        // 全选函数
        function selectAll() {
            var chks = document.getElementsByName("chkHobby");
            for (var i = 0; i < chks.length; i++)
            {
                chks[i].checked = true;
            }
        }

        // 取消函数
        function selectNone() {
            var chks = document.getElementsByName("chkHobby");
            for (var i = 0; i < chks.length; i++)
            {
                chks[i].checked = false;
            }
        }

        // 反选函数
        function selectReverse() {
            var chks = document.getElementsByName("chkHobby");
            for (var i = 0; i < chks.length; i++)
            {
                chks[i].checked = !chks[i].checked;
            }
        }
    </script>
</head>
<body>
    <form id="frm_1">
        <fieldset>
            <legend>爱好</legend>
            <input type="checkbox" name="chkHobby" value="internet" />上网
            <input type="checkbox" name="chkHobby" value="reading" />阅读
            <input type="checkbox" name="chkHobby" value="games" />游戏
            <input type="checkbox" name="chkHobby" value="sports" />运动
            <input type="checkbox" name="chkHobby" value="shopping" />购物
        </fieldset>
        <input type="button" name="btn" value="全选" onclick="selectAll()" />
        <input type="button" name="btn" value="反选" onclick="selectReverse()" />
        <input type="button" name="btn" value="取消" onclick="selectNone()" />
    </form>
</body>
</html>

关键代码解释

<input type="checkbox" />是带有一个预选定复选框的 HTML 表单
它有一个checked属性，这个属性表示是否选定，当这个属性为true时，框表示为选定状态，当这个属性为false时，框表示为未选定状态

将每一个<input type="checkbox" />设定一个相同的name属性，在 JavaScript 代码中，通过document.getElementsByName()的方法，获取到每一个<input type="checkbox" />

在全选函数中，将每一个<input type="checkbox" />的checked属性变为true
在取消函数中，将每一个<input type="checkbox" />的checked属性变为false
在反选函数中，将每一个<input type="checkbox" />的checked属性变为当前该属性值的相反值

结果展示

在这里插入图片描述
点击上网、阅读，结果如下图

再次点击可以取消选定，点击反选按钮，结果如下图

点击全选按钮，结果如下图

点击取消按钮，结果如下图

你的大数据学长

关注

7
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
HTML+JS实现一组复选框的全选、取消、反选

HTML+JS实现一组复选框的全选、取消、反选预计效果代码关键代码解释结果展示预计效果实现一组复选框的全选、反选、取消选中的功能，界面如下图代码该代码可在我的GitHub中找到，链接在此<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <ti...
复制链接

扫一扫