请选择 进入手机版 | 继续访问电脑版
本站特色:极好的技术研究氛围!所有技术发帖,必有回复! 做最受欢迎的Java论坛

疯狂Java联盟

 找回密码
 加入联盟
查看: 41|回复: 0

JavaScript实现全选反选案例

[复制链接]
发表于 2017-12-6 22:02:52 | 显示全部楼层 |阅读模式
读者可以进行测试和分析:
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <title> 疯狂Java-JavaScript </title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=GBK"/>
  6. <meta http-equiv="pragma" content="no-cache"/>
  7. <meta http-equiv="Cache-Control" content="no-cache, must-revalidate"/>
  8. <meta name="Keywords" content="keyword1,keyword2,keyword3"/>
  9. <meta name="Description" content="网页信息的描述"/>
  10. <meta name="Author" content="fkjava.org"/>
  11. <meta name="Copyright" content="All Rights Reserved."/>
  12. <link rel="shortcut icon" type="image/x-icon" href="fkjava.ico"/>
  13. <link rel="stylesheet" type="text/css" href="css.css"/>
  14. <script type="text/javascript">
  15. window.onload = function(){
  16. var checkedBoxs = document.getElementsByName("box");
  17. var checkAll = document.getElementById("checkAll");
  18. checkAll.onclick = function(){
  19. // 提取全选自己的状态
  20. // alert(this.checked);
  21. // 拿到界面上所有的按钮
  22. for(var i = 0 ; i < checkedBoxs.length ; i++ ){
  23. var box = checkedBoxs[i];
  24. box.checked = this.checked;
  25. }
  26. }

  27. // 独立出来 :为每个按钮绑定点击
  28. for(var i = 0 ; i < checkedBoxs.length ; i++ ){
  29. var box = checkedBoxs[i];
  30. box.onclick = function(){
  31. // 判断当前选中的总数量是否等于总数量
  32. var allSize = checkedBoxs.length ;
  33. // 选中的总数
  34. var count = 0 ;
  35. for(var j = 0 ; j < checkedBoxs.length ; j++ ){
  36. var box1 = checkedBoxs[j];
  37. if(box1.checked){
  38. count++;
  39. }
  40. }
  41. // 全选应该选中 反之
  42. checkAll.checked = (count == allSize) ;
  43. }
  44. }

  45. document.getElementById("btn").onclick = function(){
  46. // 先拿到当前所有的选项 把对应的状态取反即可
  47. for(var i = 0 ; i < checkedBoxs.length ; i++ ){
  48. var box = checkedBoxs[i];
  49. box.checked = !box.checked ;
  50. }

  51. // 判断当前选中的总数量是否等于总数量
  52. var allSize = checkedBoxs.length ;
  53. // 选中的总数
  54. var count = 0 ;
  55. for(var j = 0 ; j < checkedBoxs.length ; j++ ){
  56. var box1 = checkedBoxs[j];
  57. if(box1.checked){
  58. count++;
  59. }
  60. }
  61. // 全选应该选中 反之
  62. checkAll.checked = (count == allSize)

  63. }
  64. };
  65. </script>
  66. </head>

  67. <body>
  68. <input type="checkbox" id="checkAll"/>全选<br/>
  69. <input type="checkbox" name="box"/>A<br/>
  70. <input type="checkbox" name="box"/>2<br/>
  71. <input type="checkbox" name="box"/>3<br/>
  72. <input type="checkbox" name="box"/>4<br/>
  73. <input type="checkbox" name="box"/>5<br/>
  74. <input type="checkbox" name="box"/>6<br/>
  75. <input type="checkbox" name="box"/>7<br/>
  76. <input type="checkbox" name="box"/>8<br/>
  77. <input type="checkbox" name="box"/>9<br/>
  78. <input type="checkbox" name="box"/>10<br/>
  79. <input type="button" value="反选" id="btn"/>
  80. </body>
  81. </html>
复制代码


您需要登录后才可以回帖 登录 | 加入联盟

本版积分规则

视频、代码、电子书下载
请关注"疯狂图书"公众号
QQ交流1群: 545923995  未满

小黑屋|手机版|Archiver|疯狂Java联盟 ( 粤ICP备11063141号 )

GMT+8, 2017-12-18 20:45 , Processed in 0.284265 second(s), 6 queries , File On.

快速回复 返回顶部 返回列表