js复选框实现全选、全不选、反选

it2022-05-05 72

复选框为checkbox对象

通过input就可以将一个简单的复选框呈现在页面上

要实现的大概就是这样一个页面

思路

全选

因为要得到复选框数组，而id又不能重复。所以通过name来得到复选框数组。得到数组后遍历，将所有checked值设置为true即可实现全选，全不选原理相同

反选

同样的方法得到复选框数组，遍历的时候判断如果checked值为true则改为false，checked值为false则改为true

最上面的全选/全不选功能

通过id获得最上面的复选框，判断其checked值若为true则将所有的复选框设置为true,为false则设置为false

注意

为什么不是true的时候设置为false呢？因为当点击的时候复选框已发生变化，这个时候，下面的复选框应该是与上面一致的

源代码如下

1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="utf-8" /> 6 <title>复选框</title> 7 8 <style type="text/css"> 9 10 </style> 11 </head> 12 13 <body> 14 <input type="checkbox" id="boxid" οnclick="setAllNo()" />全选/全不选 15 <br /> 16 <input type="checkbox" name="love" />篮球 17 <br /> 18 <input type="checkbox" name="love" />排球 19 <br /> 20 <input type="checkbox" name="love" />羽毛球 21 <br /> 22 <input type="checkbox" name="love" />乒乓球 23 <br /> 24 <input type="button" value="全选" οnclick="setAll()" /> 25 <input type="button" value="全不选" οnclick="setNo()" /> 26 <input type="button" value="反选" οnclick="setOthers()" /> 27 28 <script type="text/javascript"> 29 //全选函数 30 function setAll() { 31 var loves = document.getElementsByName("love"); 32 for (var i = 0; i < loves.length; i++) { 33 loves[i].checked = true; 34 } 35 } 36 37 //全不选函数 38 function setNo() { 39 var loves = document.getElementsByName("love"); 40 for (var i = 0; i < loves.length; i++) { 41 loves[i].checked = false; 42 } 43 } 44 45 //反选 46 function setOthers() { 47 var loves = document.getElementsByName("love"); 48 for (var i = 0; i < loves.length; i++) { 49 if (loves[i].checked == false) 50 loves[i].checked = true; 51 else 52 loves[i].checked = false; 53 } 54 } 55 56 //全选/全不选操作 57 function setAllNo(){ 58 var box = document.getElementById("boxid"); 59 var loves = document.getElementsByName("love"); 60 if(box.checked == false){ 61 for (var i = 0; i < loves.length; i++) { 62 loves[i].checked = false; 63 } 64 }else{ 65 for (var i = 0; i < loves.length; i++) { 66 loves[i].checked = true; 67 } 68 } 69 } 70 </script> 71 72 </body> 73 74 </html>

例子2

1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 5 <title>全选，反选按钮</title> 6 <script type="text/javascript"> 7 window.οnlοad=function(){ 8 /* 9 *1 #checkedAllBtn 10 * 2 #checkedBoBtn 11 * 3 #checkedRevBtn 12 * 4 #sendBtn 13 * 5 #checkedAllBox 14 * 6 #items 15 * */ 16 17 var checkedAllBtn = document.getElementById("checkedAllBtn"); 18 //checkedAllBox 19 var checkedAllBox = document.getElementById("checkedAllBox"); 20 21 checkedAllBtn.onclick = function(){ 22 23 //获取四个多选框items 24 var items = document.getElementsByName('items'); 25 26 //遍历items 27 for(var i=0;i<items.length;i++) 28 { 29 //设置四个多选框变成选中状态 30 //通过多选框的checked属性可获取或设置选中状态 31 items[i].checked = true; 32 33 } 34 35 //将checkedAllBox设置为选中状态 36 checkedAllBox.checked = true; 37 38 39 }; 40 41 //全不选按钮 42 var checkedNoBtn = document.getElementById("checkedNoBtn"); 43 44 checkedNoBtn.onclick = function(){ 45 //获取四个多选框items 46 var items = document.getElementsByName('items'); 47 48 //遍历items 49 for(var i=0;i<items.length;i++) 50 { 51 //设置四个多选框变成选中状态 52 //通过多选框的checked属性可获取或设置选中状态 53 items[i].checked = false; 54 55 } 56 57 //将checkedAllBox设置为选中状态 58 checkedAllBox.checked = false; 59 60 }; 61 62 //反选也要判断是否都需要全部选中 63 var checkedRevBtn = document.getElementById("checkedRevBtn"); 64 65 checkedRevBtn.onclick = function(){ 66 //获取四个多选框items 67 var items = document.getElementsByName('items'); 68 69 checkedAllBox.checked = true; 70 71 //遍历items 72 for(var i=0;i<items.length;i++) 73 { 74 //设置四个多选框变成选中状态 75 //通过多选框的checked属性可获取或设置选中状态 76 items[i].checked = !items[i].checked; 77 78 79 if(!items[i].checked){ 80 //一旦进入判断，则证明不是全选状态 81 //将checkedAllBox设置为没选中状态 82 checkedAllBox.checked = false; 83 84 } 85 86 } 87 88 }; 89 90 //提交按钮 91 var sendBtn = document.getElementById("sendBtn"); 92 sendBtn.onclick = function(){ 93 var items = document.getElementsByName('items'); 94 //遍历 items 95 for(var i=0; i<items.length;i++) 96 { 97 //判断多选框是否选中 98 if(items[i].checked){ 99 alert(items[i].value); 100 } 101 } 102 }; 103 104 105 checkedAllBox.onclick = function(){ 106 var items = document.getElementsByName('items'); 107 108 //遍历items 109 for(var i=0;i<items.length;i++) 110 { 111 //设置四个多选框变成选中状态 112 items[i].checked = this.checked; 113 114 } 115 116 117 118 119 120 }; 121 122 //items 123 124 //如果四个多选框全都选中，则checkedAllBox也应该选中 125 //如果四个多选框都没选中，则checkedAllBox也应该没选中 126 var items = document.getElementsByName('items'); 127 //为四个多选框分别绑定点击响应函数 128 for(var i=0 ; i<items.length ; i++){ 129 items[i].onclick = function(){ 130 131 //将checkedAllBox设置为选中状态 132 checkedAllBox.checked = true; 133 134 for(var j=0 ; j<items.length ; j++){ 135 //判断四个多选框是否全选 136 //只要有一个没选中则就不是全选 137 if(!items[j].checked){ 138 //一旦进入判断，则证明不是全选状态 139 //将checkedAllBox设置为没选中状态 140 checkedAllBox.checked = false; 141 //一旦进入判断，则已经得出结果，不用再继续执行循环 142 break; 143 } 144 145 } 146 147 148 149 }; 150 } 151 152 153 } 154 155 </script> 156 </head> 157 <body> 158 159 <form method="post" action=""> 160 你爱好的运动是？<input type="checkbox" id="checkedAllBox" />全选/全不选 161 162 <br /> 163 <input type="checkbox" name="items" value="足球" />足球 164 <input type="checkbox" name="items" value="篮球" />篮球 165 <input type="checkbox" name="items" value="羽毛球" />羽毛球 166 <input type="checkbox" name="items" value="乒乓球" />乒乓球 167 <br /> 168 <input type="button" id="checkedAllBtn" value="全　选" /> 169 <input type="button" id="checkedNoBtn" value="全不选" /> 170 <input type="button" id="checkedRevBtn" value="反　选" /> 171 <input type="button" id="sendBtn" value="提　交" /> 172 </form> 173 </body> 174 </html>

转载于:https://www.cnblogs.com/yuer20180726/p/11152408.html

专利

最新回复(0)