预计效果

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

代码

该代码可在我的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>