马富天PHP博客

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

学习笔记 马富天 2017-06-15 20:45:19 4 0

【摘要】之前有一篇文章介绍如何使用 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>
  41.         </tbody>
  42.     </table>
  43. </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 文件中,然后打开运行,即可看到效果。

版权归 马富天PHP博客 所有

本文标题:《使用原生 js/JavaScript 使用表单全选、全不选》

本文链接地址:http://www.mafutian.net/262.html

转载请务必注明出处,小生将不胜感激,谢谢! 喜欢本文或觉得本文对您有帮助,请分享给您的朋友 ^_^

0

0

上一篇《 使用 HTML5 实现本地存储——小例子:简易留言板 》 下一篇《 使用 JavaScritpt html5 模拟 APP 页面实现下拉正在刷新功能 》
分享到:

暂无评论

评论审核未开启
表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情
验证码