原生js获取单选、输入框信息

最新推荐文章于 2024-04-30 14:07:40 发布

weixin_43939111

最新推荐文章于 2024-04-30 14:07:40 发布

阅读量665

点赞数

分类专栏：原生js

本文链接：https://blog.csdn.net/weixin_43939111/article/details/113555451

版权

原生js 专栏收录该内容

41 篇文章 1 订阅

订阅专栏

一、表单输入框与单选值获取
直接通过form中属性name值获取

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #show{ border:1px solid red;}
    </style>
</head>
   <body>  
    <form name="myform"> 
        爱好： 
        <input type="radio" name="hobby" value="前端" checked/>前端
        <input type="radio" name="hobby" value="全栈">全栈<br/>
        简介：<input type="text" name="info">
    </form> 
    <div id="show">
    </div>  
    <input type="button" name="button" value="获取" onclick="print()" />  
    <script>
        function print(){
            var hob = myform.hobby.value
            var inf = myform.info.value
            document.getElementById("show").innerText=hob+":"+inf
        }
    </script> 
   </body>  
</html>

在这里插入图片描述

二、单独输入框与单选获取
单选需要遍历获取选中值，输入框获取元素的value属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #show{border:1px solid red;}
    </style>
</head>
   <body>
    爱好：
    <input type="radio" name="like" value="一" checked/>一
    <input type="radio" name="like" value="二">二</br>
    描述：<input type="text" id="inp" value="">
    <div id="show">
    </div>  
    <hr/>
    <input type="button" name="button" value="获取" onclick="print()" />  
    <script>
        function print(){
            var hob = document.getElementsByName("like")
            var inf = document.getElementById("inp").value
            var hobMess
            for(var i=0;i<hob.length;i++){
                console.log(hob[i])
                if(hob[i].checked){
                    hobMess=hob[i].value
                }
            }
            document.getElementById("show").innerText=hobMess+":"+inf
        }
    </script> 
   </body>  
</html>

在这里插入图片描述

weixin_43939111

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
原生js获取单选、输入框信息

一、表单输入框与单选值获取直接通过form中属性name值获取<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <sty
复制链接

扫一扫