zoukankan      html  css  js  c++  java
  • JS获取表单元素的value

    <!--
    1.option
    selected属性,如果我们在下拉列表里面选择了一个option那么他的selected="true" ,如果我们想设置当前的option是选中 状态的,那么我们只要设置
    它的selected=‘true’或者selected="selected"或者selected,这几种方式设置都可以,但是在我们使用jquery或者js获取selected这个属性的值时,
    如果他当前的状态时选中的那么他的属性值就是true
    2.checkedbox,radio
    checked属性只要我们设置了checked属性那么他的值就是true其实这几个属性的设置方法都是一样的,如checked="checked",或者
    checked="true"或者checked这几种设置方法都可以设置这个当前的checkbox为选中状态
    -->
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html> 
    <head> 
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
    <title>##</title> 
    <style type="text/css"> 
    </style> 
    </head> 
    <body>
    文本域:
        <input type="text" name="userName" id="userName" value="默认值"/><br/>
    
    单选框:
        <input type="radio" name="sex" value="woman"/><input type="radio" name="sex" value="man"><br/>
    
    复选框:
        <input type="checkbox" name="hobby" value="1">1
        <input type="checkbox" name="hobby" value="2">2
        <input type="checkbox" name="hobby" value="3">3<br/>
    下拉菜单:
        <select name="hobby" id="hobby">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
        </seclect><br/>
    提交不同表单元素的值:
        <input type="button" value="获取表单元素的值" onclick="getVal();"/>
    <script type="text/javascript">
    function getVal(){
        var str="";
        //获取文本域的值
        var text=document.getElementById("userName");
        str="文本域:"+text.value+"";
        //获取单选框的值
        var radios=document.getElementsByName("sex");
        for(var i=0;i<radios.length;i++){
            if(radios[i].checked){
                str+="单选框:"+radios[i].value+"";
            }
        }
        //获取复选框的值
        var checkboxs=document.getElementsByName("hobby");
        for(var i=0;i<checkboxs.length;i++){
            if(checkboxs[i].checked){
                str+="复选框:"+checkboxs[i].value+"";
            }
        }
        //获取下拉菜单的值
        //方法一:
        var selects=document.getElementById("hobby")
        str+="下拉菜单:"+selects.value+"";
        //方法二:
        str+="下拉菜单:"+selects.options[selects.selectedIndex].value;
        console.log(str);
        
        alert(str)
    }
    </script>
    </body> 
    </html> 
  • 相关阅读:
    Java中存取权限和修饰符public、private、protected和default的区别和联系
    java集合之ArrayList,TreeSet和HashMap分析
    ResultSet,RowSet,OracleCachedRowSet和RowSetMetaData区别及联系
    实战篇
    kubernetes系列之 service代理模式ipvs
    Python Jinja2的简单使用
    Helm v3从入门到实战
    迷宫
    python多线程下载文件
    乱码,编码
  • 原文地址:https://www.cnblogs.com/angelye/p/7481415.html
Copyright © 2011-2022 走看看