这篇文章主要介绍了 javascript 实现简单的全选和反选功能的相关资料, 需要的朋友可以参考下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
效果图:
具体代码:
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- 全选反选
- </title>
- </head>
- <body>
- <input type="button" value="全选" id="all">
- <input type="button" value="反选" id="reverse">
- <input type="checkbox" id="flagCheck">
- <ul id="checkboxList">
- <li>
- <input type="checkbox">
- </li>
- <li>
- <input type="checkbox">
- </li>
- <li>
- <input type="checkbox">
- </li>
- <li>
- <input type="checkbox">
- </li>
- <li>
- <input type="checkbox">
- </li>
- <li>
- <input type="checkbox">
- </li>
- <li>
- <input type="checkbox">
- </li>
- <li>
- <input type="checkbox">
- </li>
- <li>
- <input type="checkbox">
- </li>
- <li>
- <input type="checkbox">
- </li>
- <li>
- <input type="checkbox">
- </li>
- </ul>
- <p>
- 布尔属性,只要name即可,值可为空 checked,selected,readonly,disabled....
- </p>
- <script type="text/javascript">
- //1.找节点
- var allBtn = document.querySelectorAll("#all")[0];
- var reverseBtn = document.querySelector("#reverse");
- var flagCheck = document.getElementById("flagCheck");
- var checkList = document.querySelectorAll("#checkboxList input");
- function checkAll() {
- for (var j = 0; j < checkList.length; j++) {
- if (!checkList[j].checked) {
- break;
- }
- }
- if (j == checkList.length) {
- // alert("全部为真")
- flagCheck.checked = true;
- } else {
- // alert("至少一个不为真");
- flagCheck.checked = false;
- }
- }
- //2.加事件
- //全选
- allBtn.onclick = function() {
- if (flagCheck.checked) {
- flagCheck.checked = false;
- for (var i = 0; i < checkList.length; i++) {
- checkList[i].checked = false;
- }
- } else {
- flagCheck.checked = true;
- for (var i = 0; i < checkList.length; i++) {
- checkList[i].checked = true;
- }
- }
- }
- //反选
- reverseBtn.onclick = function() {
- for (var i = 0; i < checkList.length; i++) {
- if (checkList[i].checked) {
- checkList[i].checked = false;
- } else {
- checkList[i].checked = true;
- }
- }
- //执行检查所有checkList是否被选上了
- checkAll();
- }
- for (var i = 0; i < checkList.length; i++) {
- checkList[i].onclick = checkAll;
- }
- </script>
- </body>
- </html>
希望本文所述对大家学习 javascript 程序设计有所帮助。
来源: http://www.phperz.com/article/17/0409/267727.html