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

时间 2020-05-16 标签 html+js html 实现一组复选框全选取消

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

预计效果

实现一组复选框的全选、反选、取消选中的功能，界面以下图
javascript

代码

该代码可在个人GitHub中找到，连接在此html

<!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时，框表示为未选定状态java

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

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

结果展现

点击上网、阅读，结果以下图

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

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

点击取消按钮，结果以下图
github