<!--

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>

JS获取表单元素的value的更多相关文章

  1. 使用js获取表单元素的值

    function getParams(formName) { var frmMain = document.getElementById(formName)?document.getElementBy ...

  2. js 极简获取表单 元素 ！

    let s =[]; $.each($('#formSearch input'),(m,n)=>{s.push(n)}); //示例获取表单所有 input 下滑线分割的 name 集合.set ...

  3. jquery获取表单元素与回显

    一.获取哦表单元素 dcoument表单文本对象的集合 all[] 对所有html元素的访问 forms 返回对文档中所有form对象的引用 forms[1] 对所有form对象引用 <scri ...

  4. jQuery name属性与checked属性结合获取表单元素值

    var paytype = $("input[name='paytype']:checked").val(); alert(paytype); input元素下名称为paytype ...

  5. JS基础-表单元素-新表单元素-js概述

    1.表单元素 1.input元素 1.隐藏域和文件选项框 1.隐藏域 <input type="hidden"> 要提交给服务器的数据,但是不想展示给用户看可以放在隐藏 ...

  6. MVC JS中非表单元素路由传值

    <span id="a" onclick="aaa(111)" style="cursor:pointer;">跳</sp ...

  7. js获取表单数据

    var modelObj = {}; var modelFieldsArray = $('#AddMusicCategory').serializeArray(); $.each(modelField ...

  8. jQuery 获取、设置表单元素的值

    获取表单元素值: 文本框,文本区域: $("#txt").attr("value"): 多选框 checkbox:$("#checkbox_id&qu ...

  9. html5权威指南：表单元素

    一.表单标签: 表单标签:http://blog.csdn.net/mylovestart/article/details/8589002 html5新增表单元素: 1.datalist:http:/ ...

随机推荐

  1. Zookeeper常见问题FAQ

    Zookeeper 常见问题FAQ 1.Zookeeper设置权限之坑 大家都知道,zookeeper创建节点默认的权限为:world:anyone:crdwa 设置权限时,当不小心设置成只读r,那么 ...

  2. 【基础操作】博弈论 / SG 函数详解

    博弈死我了……(话说哪个小学生会玩博弈论提到的这类弱智游戏,还取石子) 先推荐两个文章链接:浅谈算法——博弈论(从零开始的博弈论) 博弈论相关知识及其应用 This article was updat ...

  3. 代码自动补全插件CodeMix全新发布CI 2019.7.15|改进CSS颜色辅助

    CodeMix是Eclipse的一款插件,它解锁了VS Code和Code OSS附加扩展的各种技术,支持各种语言. 作为Eclipse开发人员,您再也不必觉得自己已被排除在朋友使用Visual St ...

  4. JAVA》eclipse——(一)jdk的下载、安装与配置

    http://www.cnblogs.com/best/p/6275334.html 注:这是一位老师的博客随笔链接,不是我的,里面有详细的说明,分享给大家,如果想看其他关于IT的知识,可以访问 ht ...

  5. mahout从入门到放弃--安装（1）

    1.稀里糊涂下载 我的集群是hadoop 2.7.3 ,本来想找到对应的mahout版本,但是没有找到.本着安全原则,mahout最新版本是0.14.0,回退一个版本使用0.13.0 mahout地址 ...

  6. IDEA中方法的快捷键及自定义方法

    1. 字母组合联想到对应的方法 ·ps联想到public static方法和成员 ·输入psvm联想到主方法 ·输入psf联想到用public static final 等 · pc联想到clone和 ...

  7. Linux下C++编译（代码高亮自动换行）

    1.环境准备 在ubuntu中要想编译c程序可以安装gcc编译器,编译c++的话就不能使用gcc了,要使用g++编译器. 安装gcc或是g++可以在新立得软件包管理器中直接搜索后安装或是使用终端文字命 ...

  8. python 创建实例对象

    实例化类其他编程语言中一般用关键字 new,但是在 Python 中并没有这个关键字,类的实例化类似函数调用方式. 以下使用类的名称 Employee 来实例化,并通过 __init__ 方法接收参数 ...

  9. UVA 12063 Zeros and ones 一道需要好好体会的好题

    #include<bits/stdc++.h> #include<stdio.h> #include<iostream> #include<cmath> ...

  10. [负数在内存中的存储] 0x80000000 = -2147483648

    https://blog.csdn.net/youyou362/article/details/72667951/ 1. 十进制负数以其补码存储在内存上 例子:-8 在内存中表示为:1111 1111 ...