09-Dom操作复选框（全选、全不选、反选）

最新推荐文章于 2022-09-22 17:57:13 发布

会编程的阿强

最新推荐文章于 2022-09-22 17:57:13 发布

阅读量1.5k

点赞数 1

分类专栏： JQuery和Ajax

本文链接：https://blog.csdn.net/shuangrenyu1234/article/details/48975575

版权

JQuery和Ajax 专栏收录该内容

37 篇文章 0 订阅

订阅专栏

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" %>
 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Insert title here</title>
    </head>
    <body>
        您的爱好很广泛！！！
        <br/>
        <input type="checkbox" name="checkItems" id="checkItems" value="全选/全不选"/>全选/全不选
        <br/>
        <input type="checkbox" name="items" value="足球"/>足球<input type="checkbox" name="items" value="篮球"/>篮球<input type="checkbox" name="items" value="游泳"/>游泳<input type="checkbox" name="items" value="唱歌"/>唱歌
        <br/>
        <input type="button" name="checkall" id="checkall" value="全选"/><input type="button" name="checkall" id="checkallNo" value="全不选"/><input type="button" name="checkall" id="checkall_revsern" value="反选"/>
    </body>
    <script type="text/javascript">
        window.onload = function(){
            //全选
            document.getElementById("checkall").onclick = function(){
                var itemElements = document.getElementsByName("items");
                for (var i = 0; i < itemElements.length; i++) {
                    //方法一
                    //itemElements[i].setAttribute("checked","checked");
                    //方法二
                    itemElements[i].checked = "checked";
                }
            }
            //全不选
            document.getElementById("checkallNo").onclick = function(){
                var itemElements = document.getElementsByName("items");
                for (var i = 0; i < itemElements.length; i++) {
                    //方法一(IE可以其他不可以)
                    //itemElements[i].setAttribute("checked", null);
                    //方法二(都可以)
                    itemElements[i].checked = null;
                }
            }
            //反选
            document.getElementById("checkall_revsern").onclick = function(){
                var itemElements = document.getElementsByName("items");
                for (var i = 0; i < itemElements.length; i++) {
                    var itemElement = itemElements[i];
                    if (itemElement.checked) {
                        itemElement.checked = null;
                    }
                    else {
                        itemElement.checked = "checked";
                    }
                }
            }
            
            //全选
            document.getElementById("checkItems").onclick = function(){
                var itemElements = document.getElementsByName("items");
                for (var i = 0; i < itemElements.length; i++) {
                    var itemElement = itemElements[i];
                    if (this.checked) {
                        itemElement.checked = "checked";
                    }
                    else {
                        itemElement.checked = null;
                    }
                }
            }
        }
    </script>
</html>

会编程的阿强

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
09-Dom操作复选框（全选、全不选、反选）

<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8" %> Insert title here 您的爱好很广泛！！！全选/全不选
复制链接

扫一扫