JavaScript 中可以通过循环遍历每个 checkbox 对象, 将其 checked 属性设置为 true 实现全选功能. checked 属性设置或返回 checkbox 是否应被选中.
JavaScript 实现全选:
- <!DOCTYPE html>
- <HTML>
- <head>
- <meta charset="UTF-8">
- <title>
- checkbox 的全选和取消全选
- </title>
- <script type="text/javascript">
- // 页面加载的时候, 所有的复选框都是未选中的状态
- function checkOrCancelAll() {
- //1. 获取 checkbox 的元素对象
- var chElt = document.getElementById("chElt");
- //2. 获取选中状态
- var checkedElt = chElt.checked;
- //3. 若 checked=true, 将所有的复选框选中, checked=false, 将所有的复选框取消
- var allCheck = document.getElementsByName("interest");
- //4. 循环遍历取出每一个复选框中的元素
- var mySpan = document.getElementById("mySpan");
- if (checkedElt) {
- // 全选
- for (var i = 0; i < allCheck.length; i++) {
- // 设置复选框的选中状态
- allCheck[i].checked = true;
- }
- mySpan.innerHTML = "取消全选";
- } else {
- // 取消全选
- for (var i = 0; i < allCheck.length; i++) {
- allCheck[i].checked = false;
- }
- mySpan.innerHTML = "全选";
- }
- }
- </script>
- </head>
- <body>
- <input type="checkbox" id="chElt" οnclick="checkOrCancelAll();" />
- <span id="mySpan">
- 全选
- </span>
- <br/>
学习 < input type="checkbox" name="interest" value="study"/>
阅读 < input type="checkbox" name="interest" value="read"/>
运动 < input type="checkbox" name="interest" value="sport"/>
旅行 < input type="checkbox" name="interest" value="travel"/>
绘画 < input type="checkbox" name="interest" value="draw"/>
音乐 < input type="checkbox" name="interest" value="music"/>
</body>
</HTML>
Checkbox 对象:
Checkbox 对象代表一个 HTML 表单中的一个选择框.
在 HTML 文档中 <input type="checkbox"> 每出现一次, Checkbox 对象就会被创建.
您可以通过遍历表单的 elements[] 数组来访问某个选择框, 或者通过使用 document.getElementById() .
checked 属性:
checked 属性设置或返回 checkbox 是否应被选中.
语法
checkboxObject.checked=true|false
说明
该属性保存了 checkbox 的当前状态, 不管何时, 这个值发生变化的时候, onclick 事件句柄就会触发 (也可能触发 onchange 事件句柄).
来源: http://www.css88.com/qa/javascript/11322.html