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

最新推荐文章于 2024-05-21 18:30:03 发布

原创最新推荐文章于 2024-05-21 18:30:03 发布 · 117 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#HTML

本文探讨了一个常见的前端问题：如何实现一组复选框的全选和反选功能。通过JavaScript代码实现了当全选框被选中时所有子复选框也被选中，反之亦然；同时解决了当子项部分选中时全选框状态更新的问题。

或许这个问题真的很简单，我这思想被困住了。又或许这问题真的很恶心，弄了一下午。

实际上就是一个复选框的问题

上面无数个复选框，下面一个复选框。选中一个的可以选中无数的。
无数的选择满了，就可以把一个的设置为选中状态。

正着做好做。选中一个全部选中。反着做结果被正着做的把思维困住了。再加上有人提醒，用一个全局变量。这下更坏了。脑子里就奔着全局变量下手了。
还一个问题，就是当多个复选框被选中的时候，还算是数组，当只剩下一个复选框被选中做迭代的时候，就会出现无法选中一个复选框无法选中的状态。
最后利用了很笨的方法解决的问题，哎~



<!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>