龙空技术网

jQuery 处理表单元素的值

寒笛过霜天 98

前言:

此刻大家对“jquery通过id获取元素的值”可能比较讲究,小伙伴们都需要了解一些“jquery通过id获取元素的值”的相关资讯。那么小编在网摘上网罗了一些对于“jquery通过id获取元素的值””的相关资讯,希望看官们能喜欢,朋友们快快来学习一下吧!

val([val|fn|arr])获得匹配元素的当前值(表单元素中的value值)。

val String

function(index, value) Function 此函数返回一个要设置的值。接受两个参数,index为元素在集合中的索引位置,text为原先的text值。

array Array<String> 用于 check/select 的值

$("[name=radioGroup]:checked").val();

以上代码直接获取name属性为"radioGroup"的表单元素中选中项的value值。

对于某些元素(例如<option>>、<button>等),如果没有设置value值将返回由选中项的value值组成的数组。

获取文本框中的值

jQuery 代码:

$("input").val();

设定文本框的值

jQuery 代码:

$("input").val("hello world!");

jQuery 代码:

$('input:text').val(function() {return this.value + ' ' + this.className;});

单选框、复选框、下拉式列表操作

<select id="single"><option>Single</option><option>Single2</option></select><select id="multiple" multiple="multiple"><option value="Multiple1" selected="selected">Multiple1</option><option value="Multiple2">Multiple2</option><option value="Multiple3" selected="selected">Multiple3</option></select><br/><input type="checkbox" value="check1"/> check1<input type="checkbox" value="check2"/> check2<input type="radio" value="radio1"/> radio1<input type="radio" value="radio2"/> radio2

jQuery 代码:

$("#single").val("Single2"); //等同于$("#single").val(["Single2"]);$("#multiple").val(["Multiple2", "Multiple3"])|| []; //因为存在不选的情况$("input").val(["check2", "radio1"]);//方法一://比如要选中值为wuhan的选项:$("#select").val("wuhan");//方法二:$("#select option[value='wuhan']").prop("selected","selected");

注意:

$("select").val(['列表项1','列表项2']); //为下拉列表框设置多选值

全选、反选、全不选

$().attr("checked",true); //设置复选框选中

$().attr("checked",false); //取消复选框选中

$().attr("checked"); //判断复选框选中情况,返回布尔值

<html><head><title>新建网页</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><script type="text/javascript" src="./jquery-1.4.4.js"></script><script type="text/javascript">function selAll(){//全选//jquery的大部分方法本身有遍历机制,会为匹配到的每个节点设置对应的属性//例如如下两个方法的使用效果//$('li').css('color','red') 使得全部li的文字都变为红色$('.hby').attr('checked',true);//使得class=hby的复选框都选中}function notSelAll(){//全不选$('.hby').attr('checked',false);}function fanSel(){//反选//遍历每个复选框,判断是否选中,选中就取消、否则给选中for(var i=0; i<$('.hby').length; i++){var flag = $('.hby:eq('+i+')').attr('checked');$('.hby:eq('+i+')').attr('checked',!flag);}}</script></head><body><h2>全选/全不选/反选操作</h2><p>爱好:<input type="checkbox" name="hobby[]" class="hby" value='a'>篮球<input type="checkbox" name="hobby[]" class="hby" value='b'>台球<input type="checkbox" name="hobby[]" class="hby" value='c'>网球<input type="checkbox" name="hobby[]" class="hby" value='d'>足球</p><input type="button" value="全选" onclick="selAll()" /><br /><input type="button" value="全不选" onclick="notSelAll()" /><br /><input type="button" value="反选" onclick="fanSel()" /><br /></body></html>

实例1:

<html><head><title>新建网页</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><script type="text/javascript" src="./jquery-1.4.4.js"></script><script type="text/javascript">function f1(){//获取 选中复选框的value值//获得全部选中的复选框、遍历之、获得value值//console.log($('.hby:checked'));var s = "";for(var i=0; i<$('.hby:checked').length; i++){//获得当前复选框节点s += $(".hby:checked:eq("+i+")").val()+","; //attr('value')}s = s.substr(0,s.length-1);//去除最后的","逗号$("#content").html(s);}function f2(){//设置//例如:篮球、网球、足球选中//$().val([v1,v2,v3...]);//v1/v2/v3代表选中项目的value值$('.hby').val(['a','c','d']);//使得a/c/d value值的复选框选中}</script></head><body><h2>复选框操作</h2><p>爱好:<input type="checkbox" name="hobby[]" class="hby" value='a'>篮球<input type="checkbox" name="hobby[]" class="hby" value='b'>台球<input type="checkbox" name="hobby[]" class="hby" value='c'>网球<input type="checkbox" name="hobby[]" class="hby" value='d'>足球</p><div id="content"></div><input type="button" value="获取" onclick="f1()" /><br /><input type="button" value="设置" onclick="f2()" /><br /></body></html>

实例2:

<html><head><title>val(value)方法</title><style type="text/css"><!--input{border:1px solid #006505;font-family:Arial, Helvetica, sans-serif;}p{margin:0px; padding:5px;}--></style><script language="javascript" src="jquery.min.js"></script><script language="javascript">$(function(){$("input[type=button]").click(function(){var sValue = $(this).val(); //先获取按钮的value值$("input[type=text]").val(sValue); //赋给文本框});});</script></head><body><p><input type="button" value="Feed"><input type="button" value="the"><input type="button" value="Input"></p><p><input type="text" value="click a button"></p></body></html>

扩展:$("input[type=text]").val(sValue); 可以设置多个值

$("input[type=text]").val([sValue,'广水']);

单击三个按钮后,表单内(<input type="text" value="click a button"> )显示"Feed,广水"、"the,广水"、"click a button,广水"

表单序列化

serialize() 返回值:String

序列表表格内容为字符串。

实例:序列表表格内容为字符串,用于 Ajax 请求。

HTML 代码:

<p id="results"><b>Results: </b> </p><form><select name="single"><option>Single</option><option>Single2</option></select><select name="multiple" multiple="multiple"><option selected="selected">Multiple</option><option>Multiple2</option><option selected="selected">Multiple3</option></select><br/><input type="checkbox" name="check" value="check1"/> check1<input type="checkbox" name="check" value="check2" checked="checked"/> check2<input type="radio" name="radio" value="radio1" checked="checked"/> radio1<input type="radio" name="radio" value="radio2"/> radio2</form>

jQuery 代码:

$("#results").append( "<tt>" + $("form").serialize() + "</tt>" );

serializeArray() 返回值:Array<Object>

序列化表格元素 (类似 '.serialize()' 方法) 返回 JSON 数据结构数据。

注意: 此方法返回的是JSON对象而非JSON字符串。需要使用插件或者第三方库进行字符串化操作。

返回的JSON对象是由一个对象数组组成的,其中每个对象包含一个或两个名值对——name参数和value参数(如果value不为空的话)。举例来说:

[{name: 'firstname', value: 'Hello'},{name: 'lastname', value: 'World'},{name: 'alias'}, // this one was empty]

实例:取得表单内容并插入到网页中。

HTML 代码:

<p id="results"><b>Results:</b> </p><form><select name="single"><option>Single</option><option>Single2</option></select><select name="multiple" multiple="multiple"><option selected="selected">Multiple</option><option>Multiple2</option><option selected="selected">Multiple3</option></select><br/><input type="checkbox" name="check" value="check1"/> check1<input type="checkbox" name="check" value="check2" checked="checked"/> check2<input type="radio" name="radio" value="radio1" checked="checked"/> radio1<input type="radio" name="radio" value="radio2"/> radio2</form>

jQuery 代码:

var fields = $("select, :radio").serializeArray();jQuery.each( fields, function(i, field){$("#results").append(field.value + " ");});

标签: #jquery通过id获取元素的值 #jquery中判断check #jquery获取radio选中的值 #ajax获取checkbox的值 #ajax取表单元素