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

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. 简单工厂模式使用ResourceBundle读取.properties配置文件

    在做项目时,遇到需要创建DAO.Service等类的实例的时候,想到用工厂方法来运作,而简单工厂方法又有明显的缺点: ①由于工厂类集中了所有实例的创建逻辑,违反了高内聚责任分配原则,将全部创建逻辑集中 ...

  2. 回顾经典问题算法：LIS, LCS-（DP类别）

    LIS,最长递增子序列说明见:http://blog.csdn.net/sdjzping/article/details/8759870 #include <iostream> #incl ...

  3. 理解ASP.NET 5运行时命令：DNVM, DNX, 和DNU

    ASP.NET 5 引入了一个新型的运行时,让我们可以现场交付模式组合式构建应用程序,而不依赖于宿主机上的.NET框架.这种新模式为我们提供了命令行工具(DNVM.DNX.DNU)用于管理我们的.ne ...

  4. 个人总结4-dbutils总结

    昨天学习了dbutils的使用方法,简化了使用的步骤,可以使用三四步就可以写出来,queryRunner的使用方法有了简单的了解,目前可以使用dbutils实现最简单的增删改查. 今天准备学习准备写登 ...

  5. Effective C++ Notes

    Item 07 : 为多态基类声明virtual析构函数 #include <iostream> using namespace std; class Base { public: Bas ...

  6. Python简介及编码

    首先Python是一种语言,因此根据其实现的不同,有Cpython, Jython, IronPython, Pypy等. Python执行流程 $ python /home/hello.py     ...

  7. Linux traceroute命令详解

    traceroute我们可以知道信息从你的计算机到互联网另一端的主机是走的什么路径.当然每次数据包由某一同样的出发点(source)到达某一同样的目的地(destination)走的路径可能会不一样, ...

  8. Java常见错误列表

    Java常见错误列表: 找不到符号(symbol) 类X是public的,应该被声明在名为X.java的文件中 缺失类.接口或枚举类型 缺失X 缺失标识符 非法的表达式开头 类型不兼容 非法的方法声明 ...

  9. Office 365实现单点登录系列(1)—域环境搭建

    Hello 小伙伴们, 2018新年快乐,作为2018年首篇文章,怎么能不给大家带来点干货呢?这篇文章其实我9月底的时候已经在MSDN上发布过了,为表诚意,我更新了这篇文章,并把它组成了一个系列,2. ...

  10. SRAM（静态）存储器芯片的读/写周期

    一. 要保证正确地读/写,必须注意CPU时序与存储器读/写周期的配合.一般存储器芯片手册都会给出芯片读/写周期的时序图. Intel 2114芯片的读.写周期时序如图所示. 二. 读周期 读操作时,必 ...