使用原生 js/JavaScript 使用表单全选、全不选

【摘要】之前有一篇文章介绍如何使用 jQuery 快速实现表单的全选、全不选，本文介绍一下如何使用 js 原生代码使用这一功能。

效果图如下：

css代码如下：

1. * {

2. 	padding:0;

3. 	margin:0;

4. }

5. .wrap {

6. 	width:300px;

7. 	margin:20px auto 0;

8. }

9. table {

10. 	border-collapse:collapse;

11. 	border-spacing:0;

12. 	border:1px solid #c0c0c0;

13. 	width:300px;

14. }

15. th,td {

16. 	border:1px solid #d0d0d0;

17. 	color:#404060;

18. 	padding:10px;

19. }

20. th {

21. 	background-color:#09c;

22. 	font:bold 16px "微软雅黑";

23. 	color:#fff;

24. }

25. td {

26. 	font:14px "微软雅黑";

27. }

28. tbody tr {

29. 	background-color:#f0f0f0;

30. }

31. tbody tr:hover {

32. 	cursor:pointer;

33. 	background-color:#fafafa;

34. }

html 代码如下：

1. <div class="wrap">

2.     <table>

3.         <thead>

4.             <tr>

5.                 <th>

6.                     <input type="checkbox" id="j_cbAll" />

7.                 </th>

8.                 <th>菜名</th>

9.                 <th>饭店</th>

10.             </tr>

11.         </thead>

12.         <tbody id="j_tb">

13.             <tr>

14.                 <td>

15.                     <input type="checkbox" />

16.                 </td>

17.                 <td>红烧肉</td>

18.                 <td>家里蹲</td>

19.             </tr>

20.             <tr>

21.                 <td>

22.                     <input type="checkbox" />

23.                 </td>

24.                 <td>西红柿鸡蛋</td>

25.                 <td>家里蹲</td>

26.             </tr>

27.             <tr>

28.                 <td>

29.                     <input type="checkbox" />

30.                 </td>

31.                 <td>红烧狮子头</td>

32.                 <td>家里蹲</td>

33.             </tr>

34.             <tr>

35.                 <td>

36.                     <input type="checkbox" />

37.                 </td>

38.                 <td>日式肥牛</td>

39.                 <td>家里蹲</td>

40.             </tr>

42.         </tbody>

43.     </table>

44. </div>

js 代码如下：

1.  var all = document.getElementById("j_cbAll");

2.  var tbody = document.getElementById("j_tb");

3.  var checkboxs = tbody.getElementsByTagName("input");

4.  all.onclick = function() {

5.      for (var i = 0; i < checkboxs.length; i++) {

6.          var checkbox = checkboxs[i];

7.          checkbox.checked = this.checked;

8.      }

9.  };

10.  for (var i = 0; i < checkboxs.length; i++) {

11.      checkboxs[i].onclick = function() {

12.          var isCheckedAll = true;

13.          for (var i = 0; i < checkboxs.length; i++) {

14.              if (!checkboxs[i].checked) {

15.                  isCheckedAll = false;

16.                  break;

17.              }

18.          }

19.          all.checked = isCheckedAll;

20.      };

21.  }

将这三部分复制到同一个 html 文件中，然后打开运行，即可看到效果。

我要打赏