javascript DOM 复选框选择

最新推荐文章于 2024-04-28 16:37:58 发布

永远爱好写程序

最新推荐文章于 2024-04-28 16:37:58 发布

阅读量567

点赞数

分类专栏： Javascript

本文链接：https://blog.csdn.net/limlimlim/article/details/8471561

版权

Javascript 专栏收录该内容

56 篇文章 0 订阅

订阅专栏

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>复选框全选全清和反选</title>
    <script type="text/javascript">
        //取得所有的复选框对象数组
        function GetAllCheckBox() {
            var div = document.getElementById("Balls");
            var inputs = div.getElementsByTagName("input");
            //定义复选框数组，用来返回
            var checkboxs = new Array();
            var nIndex = 0;
            for (var i = 0; i < inputs.length; i++) {
                //通过type是否为checkbox来判断复选框
                if (inputs[i].type == "checkbox") {
                    checkboxs[nIndex] = inputs[i];
                    nIndex++;
                }
            }
            return checkboxs;
        }
        //全选
        function selAll() {
            var checkboxs = GetAllCheckBox();
            for (var i = 0; i < checkboxs.length; i++) {
                checkboxs[i].checked = true;
            }
        }
        //全清
        function clearAll() {
            var checkboxs = GetAllCheckBox();
            for (var i = 0; i < checkboxs.length; i++) {
                checkboxs[i].checked = false;
            }
        }
        //反选
        function reverseAll() {
            var checkboxs = GetAllCheckBox();
            for (var i = 0; i < checkboxs.length; i++) {
                if (checkboxs[i].checked == true) {
                    checkboxs[i].checked = false;
                }
                else {
                    checkboxs[i].checked = true;
                }
            }
        }
    </script>
</head>
<body>
    <div id="Balls">
        <input type="checkbox" id="c1" /><label for="c1">足球</label>
        <input type="checkbox" id="c2" /><label for="c2">台球</label>
        <input type="checkbox" id="c3" /><label for="c3">乒乓球</label>
        <br />
        <input type="button" value="全选" οnclick="selAll()" />
        <input type="button" value="全清" οnclick="clearAll()" />
        <input type="button" value="反选" οnclick="reverseAll()" />
    </div>
</body>
</html>