js做全选，用一个checkbox复选框做多个checkbox复选框的全选按钮，有一个复选框未被选择时，全选按钮的checked就为false

用一个checkbox复选框做多个checkbox复选框的全选按钮，有一个复选框未被选择时，全选按钮的checked就为false，当所有checkbox都被选中时，全选按钮也被选中。

js做全选，用一个checkbox复选框做多个checkbox复选框的全选按钮，有一个复选框未被选择时，全选按钮的checked就为false

详解：

有两种方式使<input type="checkbox" />中的复选框被选中。

方法一:直接在HTML行间中添加checked属性。   eg：<input type="checkbox" checked />

方法二：使用javascript使input对象的checked="true";  eg: document.getElementsByTagName('input')[0].checked='true';

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>全选</title>
  6. <script>
  7. window.onload = function(){
  8.     var aInput = document.getElementsByTagName('input');
  9.     var oInput = aInput[0];
  10.     var a = 0;
  11.     var b = 0;
  12.     aInput[0].onclick = function(){
  13.         for (var i = 0; i < aInput.length; i++) {
  14.             if(aInput[0].checked == true){
  15.                 aInput[i].checked = true;
  16.             }else{
  17.                 aInput[i].checked = false;
  18.             }
  19.         }
  20.     };
  21.     for (var i = 1; i < aInput.length; i++) {
  22.         aInput[i].onclick = function(){
  23.             a = 0;
  24.             b = 0;
  25.             for (var i = 1; i < aInput.length; i++) {
  26.                 if (aInput[i].checked == false) {
  27.                     a++;
  28.                 }else {
  29.                     b++;
  30.                 }
  31.             }
  32.             if(a>0){
  33.                 oInput.checked = false;
  34.             }else if(b==aInput.length-1){
  35.                 oInput.checked = true;
  36.             };
  37.         };
  38.     }
  39. };
  40. </script>
  41. </head>
  42. <body>
  43. <p><input type="checkbox" name="" />全选</p>
  44. <input type="checkbox" name="" /><br />
  45. <input type="checkbox" name="" /><br />
  46. <input type="checkbox" name="" /><br />
  47. <input type="checkbox" name="" /><br />
  48. <input type="checkbox" name="" /><br />
  49. <input type="checkbox" name="" /><br />
  50. <input type="checkbox" name="" /><br />
  51. <input type="checkbox" name="" /><br />
  52. <input type="checkbox" name="" /><br />
  53. <input type="checkbox" name="" /><br />
  54. <input type="checkbox" name="" /><br />
  55. </body>
  56. </html>

 

weinxin
我的微信
把最实用的经验，分享给最需要的读者，希望每一位来访的朋友都能有所收获！
avatar

Comment

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: