读书人

关于JS复选框的那个恶心的有关问题

发布时间: 2012-11-15 15:16:14 作者: rapoo

关于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>

读书人网 >JavaScript

热点推荐