Java web第四天--复选中的全选、全不选、反选应用

最新推荐文章于 2021-12-27 15:42:06 发布

cc.ChenLy

最新推荐文章于 2021-12-27 15:42:06 发布

阅读量743

点赞数

本文链接：https://blog.csdn.net/weixin_46589442/article/details/107428099

版权

document对象的三种查询方法，如果有id属性，优先使用getElementById方法
如果没有id属性，优先使用getElementsByname方法
如果id和name属性都没有，最后按标签名查getElementsByTagName

以上三个方法，一定要在页面加载完成之后才能执行，因为页面是从代码从上往下读的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function checkAll() {
            //
           var hobbles = document.getElementsByName("hobby");
            //alert(hobbles.length);//集合的元素：3，集合中每个元素都是dom对象
            /*
            alert(hobbles[2].value);获取值：js
             */
            for (var i=0;i<hobbles.length;i++){
                hobbles[i].checked = true;
            }

        }
        function checkNo() {
            var hobbles = document.getElementsByName("hobby");
            for (var i=0;i<hobbles.length;i++){
                hobbles[i].checked = false;
            }
        }
        function checkRe() {
            var hobbles = document.getElementsByName("hobby");
            for (var i=0;i<hobbles.length;i++){
                hobbles[i].checked = !hobbles[i].checked;
               /* if(hobbles[i].checked){
                    hobbles[i].checked = false;
                }else {
                    hobbles[i].checked = true;
                }*/
            }

        }
    </script>

</head>
<body>
    兴趣爱好：
    <input type="checkbox" name="hobby" value="cpp" checked="checked">C++
    <input type="checkbox" name="hobby" value="Java">java
    <input type="checkbox" name="hobby" value="js">javascipt
    <br>
    <button onclick="checkAll()">全选</button>
    <button onclick="checkNo()">全不选</button>
    <button onclick="checkRe()">反选</button>


</body>
</html>

另一种全选方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function checkAll() {
            /*
            也是集合的
             */
            var inputs = document.getElementsByTagName("input");
            for (var i = 0; i< inputs.length; i++){
                inputs[i].checked = true;
            }


        }

    </script>

</head>
<body>
    兴趣爱好：
    <input type="checkbox"   value="cpp" checked="checked">C++
    <input type="checkbox"   value="Java">java
    <input type="checkbox"   value="js">javascipt
    <br>
    <button onclick="checkAll()">全选</button>
   <!-- <button onclick="checkNo()">全不选</button>
    <button onclick="checkRe()">反选</button>-->


</body>
</html>

cc.ChenLy

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
Java web第四天--复选中的全选、全不选、反选应用

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript"> function checkAll() { // var hobbles = document.getElem
复制链接

扫一扫