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

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. C# 串口

    /// <summary>        /// 串口初始化         /// </summary>        private void OpenSerialPort ...

  2. Vue小案例（一）

    案例需求: 创建一个品牌展示表格,表头有编号(id),品牌名称(name),创建时间(time)和操作,需要实现的功能是对数据的增删操作,和时间的格式化. 思路分析:在开发之前需要想清楚要用到Vue中 ...

  3. 如何用kindle看论文

    kindle的pdf显示效果向来不好,那么如何把pdf转换成mobi格式呢 可以把个人文件(pdf)发送至您的[发送至Kindle]电子邮箱时,在电子邮件的主题栏中填写"convert&qu ...

  4. Google 嘘! 嘘!

    https://www.gufen.gq(无广告,原guso.ml,ggso.ga,guge.ga) https://c.aiguso.tk (无广告,体验良好) https://d.freedo.g ...

  5. Windows Azure系列公开课 - 第三课：创建虚拟机 (基础篇)

    Windows Azure微软智能云平台主要提供四大类服务:计算服务(Compute),数据服务 (Data Services) ,应用服务 (App Services) ,网络服务(Network) ...

  6. java笔记--关于多线程状态的理解和应用

    关于多线程的状态 --如果朋友您想转载本文章请注明转载地址"http://www.cnblogs.com/XHJT/p/3890266.html  "谢谢-- 线程共有6种状态:1 ...

  7. C#操作GridView控件

    GridView控件是一个visualStudio自带的数据控件,它可以非常快速的将数据以表格方式显示在web页面上.下面就是一个利用GridView控件进行数据绑定的小例子,内容如下: 数据来源自一 ...

  8. [翻译] GTAppMenuController

    GTAppMenuController https://github.com/gianlucatursi/GTAppMenuController This is a simple project in ...

  9. APRoundedButton

    APRoundedButton https://github.com/elpsk/APRoundedButton 效果: 源码: APRoundedButton.h // // Created by ...

  10. SVN图标不显示的解决几种方式

    系统安装的Tortoise SVN,不知道是不是安装了其他软件的缘故,造成SVN客户端功能可以正常使用,就是文件夹或文件的左下角不显示图标.故上网查找解决方法: 方法一: 升级到最新版本,基本是没用的 ...