一、普通文本框的赋值与取值

1.1.1赋值

<h2>jQuery 表单元素取值与赋值方法总结</h2>

    <input type="text"  class="test1"/>

    <input type="button"  value="赋值" onclick="get()"/>

    <input type="text" class="test2"/>

    <script type="text/javascript" charset="utf-8">

          function get(){

                  var test1 = $("input.test1").val();

                  $(".test2").val(test1);

              }

    </script>

运行效果：

1.1.2 取值

示例代码：

<h2>jQuery 表单元素取值与赋值方法总结</h2>

    <input type="text" value="我是普通文本框" class="test1"/>

    <input type="button" value="取值" onclick="get()"/>

    <span id="span">

    </span>

    <script type="text/javascript" charset="utf-8">

          function get(){

                  var test1 = $("input.test1").val();

                  $("#span").html(test1);

              }

    </script>

运行效果：

二、获取和设置单选项radio的值

2.1.1获取单选项radio的值

<input name="rd" type="radio"  value="1">1

        <input name="_radio" type="radio"  value="2" checked="checked">2

        <input type="button" value="取值" onclick="Show_redio()"/>

        <script>

            function Show_redio()

            {

                //var _val = $('input:radio:checked').val();

                var _val =  $("input[type='radio']:checked").val();

                //var _val = $("input[name='rd']").val();

                alert(_val);

            }

        </script>

运行效果：

三、获取和设置复选框的值

<!DOCTYPE html>

<html>

    <head>

        <title>jQuery 表单元素取值与赋值方法总结</title>

        <script src="js/jquery-1.11.3.min.js"></script>

    </head>

    <body>

        <input type="checkbox" name="check" value="A" id="checkbox_id1">A

        <input type="checkbox" name="check" value="B" id="checkbox_id2">B

        <input name="check" type="checkbox" value="C" checked="checked" id="checkbox_id3"> C

        <input type="button" value="点击" onclick="Show_checkbox()" />

        <script>

            function Show_checkbox() {

                //取得多选框值

                //多选框checkbox：$("#checkbox_id").attr("value");

                val3 = $("#checkbox_id3").attr("value");

                val2 = $("#checkbox_id2").attr("value");

                val1 = $("#checkbox_id1").attr("value");

                //多选框checkbox：  $("#chk1").attr("checked",'');//不打勾

                //$("#chk2").attr("checked",true);//打勾

                //if($("#chk1").attr('checked')==undefined) //判断是否已经打勾

                //多选框checkbox 不打勾

                $("#checkbox_id3").attr("checked", '');

                //多选择框checkbox打勾

                $("#checkbox_id1").attr("checked", false);

                $("#checkbox_id2").attr("checked", true);

                if($("#checkbox_id1").attr('checked') == undefined)

                    alert("没有选中!");

                else

                    alert("已经选中!");

            }

        </script>

    </body>

</html>

运行效果：

四、获取和设置下拉菜单列表的值

<!DOCTYPE html>

<html>

    <head>

        <title>jQuery 表单元素取值与赋值方法总结</title>

        <script src="js/jquery-1.11.3.min.js"></script>

    </head>

    <body>

        <select name="_select" id="_select" onchange="Show_select()">

            <option value="A">A</option>

            <option value="B">B</option>

            <option value="C">C</option>

            <option value="D">D</option>

        </select>

        <span id="span">

        </span>

        <script>

            function Show_select() {

                 var options = $("#_select option:selected"); //获取选中的项

                 alert(options.val()); //拿到选中项的值

                 $("#span").html(options.text()); 

            }

        </script>

    </body>

</html>

运行效果：

//设置select下拉框的第二个元素为当前选中值

 $("#_select")[0].selectedIndex = 2;

运行效果：

//下拉框select

  //设置一下值为D的项目为当前选中项

  $("#_select").attr("value",'D');

  //添加下拉框的option

  $("<option value='E'>E</option><option vlaue='F'>F</option>").appendTo("#_select");

  //清空下拉框

  $("#_select").empty();

五、获取和设置文本框/文本域的值

<!DOCTYPE html>

<html>

    <head>

        <title>jQuery 表单元素取值与赋值方法总结</title>

        <script src="js/jquery-1.11.3.min.js"></script>

    </head>

    <body>

        <textarea cols="55" rows="5" name="text" id="text"></textarea>

        <input type="button" value="赋值文件框" onclick="Show_textarea()" />

        <script>

            function Show_textarea() {

                //填充内容

                var test = "werrtyhgfdsaadfgh"

                $("#text").val(test);

                //清空内容

                //$("#text").attr("value","");

            }

        </script>

    </body>

</html>

运行效果：

Jquery获得控件值的方法

取值：

$("")是一个jquery对象，而不是一个dom element
value是dom element的属性
jquery与之对应的是val
val() :获得第一个匹配元素的当前值。
val(val):设置每一个匹配元素的值。
所以，代码应该这样写：
取值：val = $("#id")[0].value;
赋值：
$("#id")[0].value = "new value";
或者$("#id").val("new value");

或者这样也可以：val = $("#id").attr("value");
获取一组radio被选中项的值

var item = $('input[@name=items][@checked]').val();
获取select被选中项的文本
var item = $("select[@name=items] option[@selected]").text();
select下拉框的第二个元素为当前选中值
$('#select_id')[0].selectedIndex = 1;
radio单选组的第二个元素为当前选中值
$('input[@name=items]').get(1).checked = true;

获取值：

文本框，文本区域：$("#txt").attr("value")；
多选框checkbox：$("#checkbox_id").attr("value")；
单选组radio： $("input[@type=radio][@checked]").val();
下拉框select： $('#sel').val();

控制表单元素：
文本框，文本区域：$("#txt").attr("value",'');//清空内容
$("#txt").attr("value",'11');//填充内容

多选框checkbox： $("#chk1").attr("checked",'');//不打勾
$("#chk2").attr("checked",true);//打勾
if($("#chk1").attr('checked')==undefined) //判断是否已经打勾

单选组radio： $("input[@type=radio]").attr("checked",'2');//设置value=2的项目为当前选中项
下拉框select： $("#sel").attr("value",'-sel3');//设置value=-sel3的项目为当前选中项
$("<option value='1'>1111</option><option value='2'>2222</option>").appendTo("#sel")//添加下拉框的option

$("#sel").empty()；//清空下拉框

jQuery 表单元素取值与赋值方法总结的更多相关文章

  1. Angular2+之使用FormGroup、FormBuilder和Validators对象控制表单（取值、赋值、校验和是否可编辑等）

    1.要使用Angular自带的表单控制需要先引入相关模块(.ts文件): import { FormGroup, //表单对象类 FormBuilder, //表单生成工具类 Validators} ...

  2. jQuery对html元素取值与赋值

    以下总结了常用的jQuery选择器对html元素取值与赋值 Textbox:  var str = $('#txt').val(); $('#txt').val("Set Lbl Value ...

  3. `＜jsp:getProperty＞`动作和`＜jsp:setProperty＞`动作的使用在一个静态页面填写图书的基本信息，页面信息提交给其他页面，并且在其页面显示。要去将表单元素的值赋值给Java

    <jsp:getProperty>动作和<jsp:setProperty>动作的使用 1.<jsp:getProperty>动作 语法格式: <jsp:get ...

  4. form表单元素的值序列化成对象

    /** * 将form表单元素的值序列化成对象 * param: form jquery form对象 */ var serializeObject = function(form) { var o ...

  5. 将form表单元素的值序列化成对象

    /**jQuery * 将form表单元素的值序列化成对象 * @returns object */ var serializeObject = function(form) { var o = {} ...

  6. 在JS中将指定表单内的“具有name数据的表单元素的值”封装为Get形式的字符串

    //封装post时候,表单中所有具有name数据的表单元素的值,并返回“n=1&p=a” function serialize(formid) { var arr = []; var ipts ...

  7. JavaScript之控制表单元素的值

    表单元素.value 获取表单元素的值 表单元素.value='这是修改后的值' 修改表单元素的值 案例: (1)html <input type="text" id=&qu ...

  8. easyui radio 类型的取值和赋值方法

    1.HTML 文件 <tr id="client_check1"> <th>委托人证件类型:</th> <td><input ...

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

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

随机推荐

  1. OpenStack IceHouse 部署 - 4 - 计算节点部署

    Nova计算服务(计算节点)  参考 本页内容依照官方安装文档进行,具体参见Configure a compute node(nova service) 前置工作 数据库 由于我们在Nova(计算管理 ...

  2. 51NOD1965：奇怪的式子

    传送门 拆开变成 \[\prod_{i=1}^{n}\sigma_0(i)^{\mu(i)}\prod_{i=1}^{n}\sigma_0(i)^{i}\] 考虑 \(\prod_{i=1}^{n}\ ...

  3. BZOJ3193: [JLOI2013]地形生成

    传送门 Sol 第一问可以考虑按照山的高度从大到小放 但是这样如果遇到高度相同的就不好考虑,那么同时要求数量限制从小到大 这样每次放的时候后面的一定不会影响前面,并且高度相同的时候前面能放的位置后面的 ...

  4. Android深入四大组件（五）Android8.0 根Activity启动过程（后篇）

    前言 在几个月前我写了Android深入四大组件(一)应用程序启动过程(前篇)和Android深入四大组件(一)应用程序启动过程(后篇)这两篇文章,它们都是基于Android 7.0,当我开始阅读An ...

  5. 在Windows下为PHP5.6安装redis扩展和memcached扩展

    一.php安装redis扩展   1.使用phpinfo()函数查看PHP的版本信息,这会决定扩展文件版本       2.根据PHP版本号,编译器版本号和CPU架构, 选择php_redis-2.2 ...

  6. @WebServlet

    编写好Servlet之后,接下来要告诉Web容器有关于这个Servlet的一些信息.在Servlet 3.0中,可以使用标注(Annotation)来告知容器哪些Servlet会提供服务以及额外信息. ...

  7. vs2015新建web应用程序空模板和添加webapi的模板生成文件的比较

    文件名为全红色的,是使用webapi模板生成的新文件夹或文件

  8. xml php 解析

    JSON作为数据交换可以说已经成为了一种事实上的标准,但是前几年和它对应的xml虽然说用的越来越少,但是我感觉还是有他可以应用的地方. json更偏重于程序员来使用和解读,而xml则更适合用户来使用和 ...

  9. .net core系列之《将.net core应用部署到Ubuntu》

    1.首先准备一个演示项目. 2.然后将这个项目用FileZilla工具上传到Ubuntu中. 3.进入目标文件,接下来有两种方法来部署项目 a.用dotnet run命令 root@hhz-virtu ...

  10. Linux 下Shell的学习2

    0. 查看帮助(比如内置功能)    man bash    -->变量处理大全 1.-计算变量长度的不同方法及不同方法的耗时对比    尽可能的用内置的命令处理,速度快        time ...