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

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. Linux VPS主机利用Crontab实现定时重启任务

    第一.安装Crontab可执行环境 一般的VPS/服务器是支持的,但是有些可能没有支持就需要我们来给予安装. A - centos系统 #安装Crontab yum install vixie-cro ...

  2. js点击事件在苹果端失效的问题

    在安卓机上,我们随意定义点击事件也能够在找到点击的元素,但是在苹果端上就是不行,怎么点击都没有效果.这是因为在苹果机上window禁止了手指误点功能,必须解除这一功能,或者给点击事件指引某个元素上绑定 ...

  3. 如何使用canvas进行2d绘图

    canvas 的 2D context 可以绘制简单的 2D 图形.它的 2D context 坐标开始于 <canvas> 元素的左上角,原点坐标是(0,0).所有的坐标值都基于这个原点 ...

  4. Grunt入门学习之(3) -- Gruntfile具体示例

    经过前面的学习,将测试的Gruntfile整合在一起! /** * Created by Administrator on 2017/6/22. */ module.exports = functio ...

  5. C# 装箱和拆箱[整理](转)

    //1. // 装箱和拆箱是一个抽象的概念 //2. // 装箱是将值类型转换为引用类型 :拆箱是将引用类型转换为值类型 // 利用装箱和拆箱功能,可通过允许值类型的任何值与Object 类型的值相互 ...

  6. Java代码调用存储过程和存储方法

    准备一个oracle 的JDBC jar 包:ojdbc14_11g.jar 首先找到你的 oracle 安装位置,例如: 1.创建一个JDBC数据库连接工具类: package com.test.d ...

  7. asp.net生成PDF文件（一）

    这个是例子是网上淘来的,哈哈,很有用的! 首先要到网上下载itextsharp.dll,然后添加引用,主程序如下: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 1 ...

  8. MVC Controller的激活

    各Controller的继承关系 Controller最重要的是对Execute方法的调用,当目标Controller对象被激活后,对请求的后续处理和最终响应均是通过执行这个Execute方法来完成. ...

  9. Python学习---Django误删除sql表后，如何创建数据

    误删除sql表后,怎么创建数据? 仅仅适合单表,多表因为涉及约束, python mangage.py makemigrations  --> 生成migrations目录和根数据库对应的sql ...

  10. 《C++ Primer Plus》读书笔记之五—函数-C++的编程模块

    函数-C++的编程模块   1.C++对于返回值的类型有一定的限制:不能是数组,但可以是其他任何类型——整数.浮点数.指针,甚至可以是结构和对象(有趣的是,虽然C++函数不能直接返回数组,但可以将数组 ...