[JavaScript]复选框全部选中、反选及不选中

最新推荐文章于 2023-12-09 14:25:27 发布

Jia的博客

最新推荐文章于 2023-12-09 14:25:27 发布

阅读量4k

点赞数 1

分类专栏： JavaScript 文章标签： javascript javaweb android mysql jQuary

本文链接：https://blog.csdn.net/Konaji/article/details/50791152

版权

JavaScript 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
    <title>复选框全选、全不选及反选</title>
    <meta charset="utf-8" />
    <script type="text/javascript">
        window.onload = function (){
            //全选/选不选
            document.getElementById("allOrNo").onclick = function (){
                var form = document.getElementById("form");
                var elements = form.getElementsByTagName("input");
                for (var i = 0; i < elements.length; i++) {
                    if (elements[i].getAttribute("type")=="checkbox") {
                        if (this.checked) {
                            elements[i].checked = "checked";
                        } else {
                            elements[i].checked = null;
                        }
                    }
                }
            }

            //全选
            document.getElementById("all").onclick = function (){
                var form = document.getElementById("form");
                var elements = form.getElementsByTagName('input');
                for (var i = 0; i < elements.length; i++) {
                    if (elements[i].getAttribute("type")=="checkbox") {
                        //方法一:任何浏览器都支持
                        elements[i].checked = "checked";
                        //方法二:IE支持
                        //elements[i].setAttribute("checked","checked");
                    }
                }
            }

            //全不选
            document.getElementById("noAll").onclick = function (){
                var form = document.getElementById("form");
                var elements = form.getElementsByTagName("input");
                for (var i = 0; i < elements.length; i++) {
                    if (elements[i].getAttribute("type")=="checkbox") {
                        //方法一:任何浏览器都支持
                        elements[i].checked = null;
                        //方法二:IE支持
                        //elements[i].setAttribute("checked",null);
                    }
                }
            }

            //反选
            document.getElementById("against").onclick = function (){
                var form = document.getElementById("form");
                var elements = form.getElementsByTagName("input");
                //遍历表单的所有input标签
                for (var i = 0; i < elements.length; i++) {
                    //获取所有复选框
                    if (elements[i].getAttribute("type")=="checkbox") {
                        if (elements[i].checked) {
                            //如果复选框选中 , 设置为非选中状态
                            elements[i].checked = null;
                        } else {
                            //如果复选框非选中 , 设置为选中状态
                            elements[i].checked = "checked";
                        }
                    }
                }
            }

            //获取复选框所有被选中的ID值
            document.getElementById("get").onclick = function (){
                var id = "";
                var form = document.getElementById("form");
                var elements = form.getElementsByTagName("input");
                //遍历表单的所有input标签
                for (var i = 0; i < elements.length; i++) {
                    //获取所有复选框
                    if (elements[i].getAttribute("type")=="checkbox") {
                        //如果复选框选中
                        if (elements[i].checked) {
                            //获取ID
                            var oneId = elements[i].getAttribute("id");
                            //拼接ID
                            if (id=="") {
                                id = oneId;
                            } else {
                                id = id + "," + oneId;  
                            }
                        }
                    }
                }
                //输出ID
                alert(id);
            }
        }
    </script>
</head>
<body>
请选择科目:<br/><br/>
<input type="checkbox" name="checkbox" value="全选/选不选" id="allOrNo">全选/选不选</input>
<br/><br/>
<form id="form">
    <input type="checkbox" name="subject" value="语文" id="1">语文</input>
    <input type="checkbox" name="subject" value="数学" id="2">数学</input>
    <input type="checkbox" name="subject" value="英语" id="3">英语</input>
    <input type="checkbox" name="subject" value="物理" id="4">物理</input>
    <input type="checkbox" name="subject" value="化学" id="5">化学</input>
    <input type="checkbox" name="subject" value="生物" id="6">生物</input>
</form>
<br/>
<input type="button" value="全选" id="all"></input>
<input type="button" value="全不选" id="noAll"></input>    
<input type="button" value="反选" id="against"></input>
<input type="button" value="获取所有被选中复选框的ID值" id="get"></input>               
</body>
</html>