这篇文章主要介绍的是通过 js 来制作复选框的全选和不选效果, 需要的朋友可以参考下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
- <html>
- <head>
- <title>
- 制作全选效果
- </title>
- <script language="javascript">
- function selectAll() {
- allcheckBoxs = document.getElementsByName("a");
- var a2 = document.getElementsByName("a1");
- if (a2[0].checked) {
- for (var i = 0; i < allcheckBoxs.length; i++) {
- allcheckBoxs[i].checked = true;
- }
- } else {
- for (var i = 0; i < allcheckBoxs.length; i++) {
- allcheckBoxs[i].checked = false;
- }
- }
- }
- </script>
- </head>
- <body>
- <form name="myform">
- <table>
- <tr>
- <td colspan="2">
- <img src="images/head.jpg" />
- </td>
- </tr>
- <tr>
- <td>
- <input type="checkbox" name="a1" onclick="selectAll()" />
- 全选/全不选
- </td>
- <td>
- <img src="images/top.jpg" />
- </td>
- </tr>
- <tr>
- <td>
- <input type="checkbox" name="a" />
- </td>
- <td>
- <img src="images/one.jpg" />
- </td>
- </tr>
- <tr>
- <td>
- <input type="checkbox" name="a" />
- </td>
- <td>
- <img src="images/two.jpg" />
- </td>
- </tr>
- <tr>
- <td>
- <input type="checkbox" name="a" />
- </td>
- <td>
- <img src="images/three.jpg" />
- </td>
- </tr>
- <tr>
- <td>
- <input type="checkbox" name="a" />
- </td>
- <td>
- <img src="images/four.jpg" />
- </td>
- </tr>
- </table>
- </form>
- </body>
- </html>
来源: