JavsScript实现getElementsById()和getElementsByName()方法

最新推荐文章于 2023-11-03 10:06:08 发布

芜湖大司马丶

最新推荐文章于 2023-11-03 10:06:08 发布

阅读量674

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/qq_44978306/article/details/107655290

版权

只是简单的实现了getElementsById()和getElementsByName()两种方法


<html>
    <head>
        <title>document方法联合</title>
        <meta charset="UTF-8">
        <script>
            function onclickFun(){
        var usernameObj=document.getElementById("username");
        var usernameText=usernameObj.value;         //返回文本框里的值
        var usernameSpanObj=document.getElementById("usernameSpan");
        var patt=/^\w{5,12}$/;
        if(patt.test( usernameText)){
            usernameSpanObj.innerHTML="用户名合法"
        }else{
            usernameSpanObj.innerHTML="用户名非法"
        }
        var usernameSpanObj=document.getElementById("usernameSpan");
            }
            function checkAll(){
                var hobbies=document.getElementsByName("hobby");
                for(var i=0;i<hobbies.length;i++){
                    hobbies[i].checked=true;
                }
            }
            function checkNo(){
                var hobbies=document.getElementsByName("hobby");
                for(var i=0;i<hobbies.length;i++){
                    hobbies[i].checked=false;
                }
            }
            function checkReverse(){
                var hobbies=document.getElementsByName("hobby");
                for(var i=0;i<hobbies.length;i++){
                    hobbies[i].checked=!hobbies[i].checked;
                    if(hobbies[i].checked){
                        hobbies[i].checked=true;
                    }else{
                        hobbies[i].checked=false;
                    }
                }
            }
        </script>
        <style type="text/css">
          body{
                text-align: center;
            }
            span{
                font-size: 12px;
            }
        </style>
    </head>
    <body>
        用户名：<input type="text" id="username" >
        <span id="usernameSpan" style="color: red;"> 请输入5-12位字母，数字和下划线  </span>
        <button onclick="onclickFun();">校验</button><br/>
        兴趣爱好：<input type="checkbox" name="hobby" value="basketball">篮球
        <input type="checkbox" name="hobby" value="football">足球
        <input type="checkbox" name="hobby" value="swimming">游泳<br/>
        <button onclick="checkAll();">全选</button>
        <button onclick="checkNo();">全不选</button>
        <button onclick="checkReverse();">反选</button>
    </body>
</html>

芜湖大司马丶

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavsScript实现getElementsById()和getElementsByName()方法

只是简单的实现了getElementsById()和getElementsByName()两种方法<html> <head> <title>document方法联合</title> <meta charset="UTF-8"> <script> function onclickFun(){ var usernameObj=document
复制链接

扫一扫