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

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 表单元素取值与赋值方法总结的更多相关文章

Angular2+之使用FormGroup、FormBuilder和Validators对象控制表单（取值、赋值、校验和是否可编辑等）
1.要使用Angular自带的表单控制需要先引入相关模块(.ts文件): import { FormGroup, //表单对象类 FormBuilder, //表单生成工具类 Validators} ...
jQuery对html元素取值与赋值
以下总结了常用的jQuery选择器对html元素取值与赋值 Textbox: var str = $('#txt').val(); $('#txt').val("Set Lbl Value ...
`＜jsp:getProperty＞`动作和`＜jsp:setProperty＞`动作的使用在一个静态页面填写图书的基本信息，页面信息提交给其他页面，并且在其页面显示。要去将表单元素的值赋值给Java
<jsp:getProperty>动作和<jsp:setProperty>动作的使用 1.<jsp:getProperty>动作语法格式: <jsp:get ...
form表单元素的值序列化成对象
/** * 将form表单元素的值序列化成对象 * param: form jquery form对象 */ var serializeObject = function(form) { var o ...
将form表单元素的值序列化成对象
/**jQuery * 将form表单元素的值序列化成对象 * @returns object */ var serializeObject = function(form) { var o = {} ...
在JS中将指定表单内的“具有name数据的表单元素的值”封装为Get形式的字符串
//封装post时候,表单中所有具有name数据的表单元素的值,并返回“n=1&p=a” function serialize(formid) { var arr = []; var ipts ...
JavaScript之控制表单元素的值
表单元素.value 获取表单元素的值表单元素.value='这是修改后的值' 修改表单元素的值案例: (1)html <input type="text" id=&qu ...
easyui radio 类型的取值和赋值方法
1.HTML 文件 <tr id="client_check1"> <th>委托人证件类型:</th> <td><input ...
jQuery 获取、设置表单元素的值
获取表单元素值: 文本框,文本区域: $("#txt").attr("value"): 多选框 checkbox:$("#checkbox_id&qu ...

随机推荐

AngularJS - Directive Restrictions
While it’s cool to make a custom element like we did the the previous cast, it’s actually more commo ...
drupal7 获取网站名称
$site_name=variable_get('site_name', 'Drupal');
drupal7区块内容对象
区块内容对象
为什么推荐用ui-router替代ngRoute
初学angularjs,第一个实例是官网的phoneCat,里面路由用的是ngRoute,后来看到别的用ui-router,觉得好奇,ui-route是什么呢?百度一些,得到如下解释: ui-rout ...
layui-table渲染不出来
通过方法渲染页面代码: <table id="tableList" lay-filter="clublist"></table> js ...
Android深入理解Context（三）Context完全解析
1· Context类型我们知道,Android应用都是使用Java语言来编写的,那么大家可以思考一下,一个Android程序和一个Java程序,他们最大的区别在哪里?划分界限又是 ...
linux 加jre环境变量
1.vi /etc/profile 2.未行添加 export JAVA_HOME=/usr/local/java export CLASSPATH=.:$JAVA_HOME/lib/tools.ja ...
[翻译] JTBorderDotAnimation
JTBorderDotAnimation https://github.com/jonathantribouharet/JTBorderDotAnimation JTBorderDotAnimatio ...
[翻译] BBCyclingLabel
BBCyclingLabel BBCyclingLabel is just like a UILabel but allows you to perform custom animations whe ...
CSS制作图形速查表
很少会有人意识到,当浏览器绘制的border,会有一个角度的问题.我们就是得用这样的一个技巧来制作三角的效果.我们只需要保证一边的边框是有色,其他边框色为透明色,这样我们就很容易制作出三角形,然后改变 ...

jQuery 表单元素取值与赋值方法总结

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

Jquery获得控件值的方法

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

随机推荐

热门专题