这篇文章主要为大家详细介绍了 js 实现复选框全选与反选, 具有一定的参考价值,感兴趣的小伙伴们可以参考一下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
- <html>
- <head>
- <title>
- html+CSS+js实现复选框全选与反选
- </title>
- <meta http-equiv="content-type" content="text/html;charset=utf-8" />
- <meta name="keywords" content="js,笔试题目" />
- <style type="text/css">
- table,tr,td { border:1px solid red; }
- </style>
- <script type="text/javascript">
- function quanxuan() {
- for (var i = 1; i <= 3; i++) {
- var cbox_id = "cb" + i;
- var cbox = document.getElementById(cbox_id);
- //alert(cbox.value);
- if (document.getElementById("cb_quanxuan").checked) cbox.checked = true;
- else cbox.checked = false;;
- }
- }
- function fanxuan() {
- for (var i = 1; i <= 3; i++) {
- var cbox_id = "cb" + i;
- var cbox = document.getElementById(cbox_id);
- if (document.getElementById("cb_fanxuan").checked) { //选中反选框
- if (cbox.checked) cbox.checked = false;
- else cbox.checked = true;
- } else {
- if (cbox.checked) cbox.checked = false;
- else cbox.checked = true;
- }
- }
- }
- </script>
- </head>
- <body>
- <form id="form1">
- <table>
- <tr>
- <td>
- <input type="checkbox" id="cb_quanxuan" onclick="quanxuan()" />
- 全选
- </td>
- <td>
- 复选框全选案例
- </td>
- <td>
- </td>
- <td>
- </td>
- </tr>
- <tr>
- <td>
- <input type="checkbox" id="cb1" value="1" />
- 1
- </td>
- <td>
- 我是傻逼1
- </td>
- <td>
- </td>
- <td>
- </td>
- </tr>
- <tr>
- <td>
- <input type="checkbox" id="cb2" value="2" />
- 2
- </td>
- <td>
- 我是傻逼2
- </td>
- <td>
- </td>
- <td>
- </td>
- </tr>
- <tr>
- <td>
- <input type="checkbox" id="cb3" value="3" />
- 3
- </td>
- <td>
- 我是傻逼3
- </td>
- <td>
- </td>
- <td>
- </td>
- </tr>
- <tr>
- <td>
- <input type="checkbox" id="cb_fanxuan" onclick="fanxuan()" />
- 反选
- </td>
- <td>
- 反选案例
- </td>
- <td>
- </td>
- <td>
- </td>
- </tr>
- </table>
- </form>
- </body>
- </html>
来源: http://www.phperz.com/article/17/0603/331367.html