关于JS复选框的那个恶心的问题
或许这个问题真的很简单,我这思想被困住了。又或许这问题真的很恶心,弄了一下午。
实际上就是一个复选框的问题
上面无数个复选框,下面一个复选框。选中一个的可以选中无数的。
无数的选择满了,就可以把一个的设置为选中状态。
正着做好做。选中一个全部选中。反着做结果被正着做的把思维困住了。再加上有人提醒,用一个全局变量。这下更坏了。脑子里就奔着全局变量下手了。
还一个问题,就是当多个复选框被选中的时候,还算是数组,当只剩下一个复选框被选中做迭代的时候,就会出现无法选中一个复选框无法选中的状态。
最后利用了很笨的方法解决的问题,哎~
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head> <title></title> <script type="text/javascript"> function allSelect() { var username = document.getElementsByName("usernames"); var state = document.getElementById("allselectbox").checked; var length = document.getElementsByName("usernames").length; if (length) { for (var i = 0; i < length; i++) { username[i].checked = state; } } else { username.checked = state; } } function selectAll() { var length = document.getElementsByName("usernames").length; var username = document.getElementsByName("usernames"); for (var i = 0,count = 0; i < length; i++) { if (username[i].checked == true) { count++; if (count == length) { document.getElementById("allselectbox").checked = true; } else { document.getElementById("allselectbox").checked = false; } } if (count == 0) { document.getElementById("allselectbox").checked = username[i].checked; } } } </script></head><body><table> <tr> <td bgcolor="f5f5f5"> <div align="center"><input type="checkbox" name="usernames" value="${entry.username}" onclick="selectAll()"> </div> </td> <td bgcolor="f5f5f5"> <div align="center">Name1</div> </td> </tr> <tr> <td bgcolor="f5f5f5"> <div align="center"><input type="checkbox" name="usernames" value="${entry.username}" onclick="selectAll()"> </div> </td> <td bgcolor="f5f5f5"> <div align="center">Name2</div> </td> </tr> <tr> <td bgcolor="f5f5f5"> <div align="center"><input type="checkbox" name="usernames" value="${entry.username}" onclick="selectAll()"> </div> </td> <td bgcolor="f5f5f5"> <div align="center">Name3</div> </td> </tr> <table width="100%" border="0" cellspacing="1" cellpadding="3"> <tr> <td width="10%"><input type="checkbox" onclick="javascript:allSelect()" id="allselectbox">SelectAll/None</td> </tr> </table></body></html>