关于JS复选框的那个恶心的有关问题
日期：2014-05-16 浏览次数：20410 次
关于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>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
