`

jQuery获取及设置单选框,多选框,文本框内容

jqueryhtmljavascript 
阅读更多
在工作中,text,radio,checkbox,select在开发过程中是必不可少的一部分.在开发过程中经常要处理页面表单元素.
Eg:
   在复选框checkBox中获取checked的value值,来触发和调用其它页面表单元素,制作互动性更强更友好的用户体验.
jQuery通过元素$(#id)产生一个object对象,通过对获取的对象输入了解,获取任何元素中的任何信息.
为了以后工作方便,我总结了相关jQuery操作object对象的方法,获取下拉框selected,复选框checkBox,文本框text,radio value值

其操作过程:
   1.jQuery获取object对象,(select对象,checkbox对象,text对象)
   2.获取对象值,对于值唯一的元素,如:select,text通过get()方法获取value值.(get(0)如同数组下标,默认值是从0开始),对于数据元素,如checkbox通过each循环获取value值
   3.获取表单元素值主要是jQuery中get()对象访问方法,其次是each()方法,$(#id)产生的是一个对象,获取其中的hi完全可以使用jQuery对象访问方法.
    (1).each()循环,相当于foreach;
    (2).size()统计个数
    (3).length()统计个数
    (4).get()单个或多个
    (5).index()索引

载入jQuery库的最佳方法 
<SCRIPT type=text/javascript src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></SCRIPT>
<script type="text/javascript">!window.jQuery && document.write('<script type="text/javascript" src="/js/jquery-1.4.4.min.js"><\/script>');</script>

Error: uncaught exception: Syntax error, unrecognized expression: [@type='radio']
在Jquery-1.4.2版使用该方法会报错,“name”属性前不用加“@”符号。
Eg: 
   $("input[name=radioId]:radio").attr("checked",'r2');//设置value=r2的项目为当前选中项
   $("input[@type=radio][value=r2]").attr("checked",'checked');  //设置value=r2的项目为当前选中项 
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery教程基础篇之强大的选择器-过滤选择器-表单对象属性过滤选择器</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<SCRIPT type=text/javascript src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></SCRIPT>
<script type="text/javascript">!window.jQuery && document.write('<script type="text/javascript" src="/js/jquery-1.4.4.min.js"><\/script>');</script>
<script type="text/javascript">
	$(document).ready(function(){
	//对表单内 可用input 赋值操作.
    $('#btn1').click(function(){
    	alert(document.getElementById("add").value);
		$("#form1 input:enabled").val("这里变化了！");
		return false;
	})
	//对表单内 不可用input 赋值操作.
	$('#btn2').click(function(){
		//获得当前text文本框的value值
		//$("#email").get(0).value;
		alert($("#email").attr("value"));
		$("#form1 input:disabled").val("这里变化了！");
		return false;
	})

	//使用:checked选择器，来操作多选框.
	$(":checkbox").click(countChecked);
	function countChecked() {
		//多选框checkbox
		$("#chk2").attr("checked",true); //checkbox选中
		var n = $("input:checked").length;
		$("div").eq(0).html("[b]有"+n+" 个被选中![/b]");
	}

	countChecked();//进入页面就调用.

	//使用:selected选择器，来操作下拉列表.
	$("select").change(function () {
		var str = "";
		//后迭代器 =====>选取select里面的元素
		$("select :selected").each(function () {
			str += $(this).text() + ",";
		});
		alert(str);
		//获得selected值
		var sele = $("#selectId option:selected").get(0).value;
		alert(sele);
		$("div").eq(1).html("[b]你选中的是："+str+"[/b]");
		
    }).trigger('change');
    
    //获得radio对象
    $("#rButtonId").click(function(){
		var radioObj = $("[name='radioId']:checked");//获取当前checked的value值
		var radio = radioObj.get(0).value;
		//var radioObj = $("[name='radioId']:checked").get(0).value;
		 $("#rResult").html("结果:"+radio);
    });
    
    //Jquery1.4.2之后的版本,"name","value"前不用加"@"符号.
    //error:uncaught exception: Syntax error, unrecognized expression: [@type='radio']
    $("input[name=radioId]:radio").attr("checked",'r2');//设置value=r2的项目为当前选中项
    //$("input[@type=radio][value=r2]").attr("checked",'checked');  //设置value=r2的项目为当前选中项
});
</script>
</head>
<body>
<h3> 表单对象属性过滤选择器.</h3>

<form id="form1" action="#">
	<button type="reset">重置所有表单元素</button>
	


  	<button id="btn1">对表单内 可用input 赋值操作.</button>
  	<button id="btn2">对表单内 不可用input 赋值操作.</button>


	可用元素：<input type="text" name="add" id="add" value="可用文本框"/>  <br/>
	不可用元素：<input type="text" name="email" id="email" disabled="disabled" value="不可用文本框"/><br/>
	<br/>
	<!-- 获取checkbox的checked值 -->
	多选框：<br/>
	<input type="checkbox" name="newsletter" checked="checked" value="test1" />test1
	<input type="checkbox" name="newsletter" value="test2" id="chk2"/>test2
	<input type="checkbox" name="newsletter" value="test3" />test3
	<input type="checkbox" name="newsletter" checked="checked" value="test4" />test4
	<input type="checkbox" name="newsletter" value="test5" />test5
	<div></div>

	<br/><br/>
	<!-- 获取select的selected值 -->
	下拉列表2：<br/>
	<select id="selectId" >
	    <option>浙江</option>
	    <option>湖南</option>
	    <option selected="selected" >北京</option>
	    <option>天津</option>
	    <option>广州</option>
	    <option>湖北</option>
    </select>
	<br/><br/>
    <div></div>
			
	

	<input type="radio" name="radioId" value="r1" />
	r1
	<input type="radio" name="radioId" value="r2" />
	r2
	<input type="radio" name="radioId" value="r3" />
	r3
	<input type="button" id="rButtonId" value="获取radio值" />
	<span id="rResult"></span>
	</form>
</body>
</html>

1
顶
0
踩
分享到：
| SQL连接JOIN例解
评论
4 楼 天使建站 2018-05-10  
http://www.aijquery.cn/Html/biaoqian/82.html
这里的更容易
3 楼 hougee217 2012-05-21  
[flash=200,200][/flash]
2 楼 hougee217 2012-05-21  
1 楼 hougee217 2012-05-21   
for(int i=0;i++;i<10000){
System.out.println(i);

}
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    jquery对单选框,多选框,文本框等常见操作小结

    本篇文章主要是对jquery对单选框,多选框,文本框等常见操作进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助

    js和jquery分别验证单选框、复选框、下拉框

    本文分别介绍了js和jQuery验证单选框(radio)、多选框(checkbox)、下拉框(select)，分享给大家供大家参考，具体内容如下 (1).首先说单选框(radio)，radio和checkbox一样都是name相同值有多个在获取 radio 值的时候...

    JQuery&CSS;&CSS;+DIV实例大全.rar

    18.jQuery美化复选框Checkbox和radio单选框的插件hcheckbox示例 19.jQuery漂亮Flash卡通动感菜单示例 20.jQuery漂亮动感二级网站导航菜单源码下载 21.jquery漂亮苹果系统动画效果的导航菜单示例 22.jquery...

    WordPress联系表单插件Contact Form 7

    可结合Akismet过滤垃圾邮件，同时也支持CAPTCHA反垃圾邮件，表单域元素支持各种最常见的：单选框，复选框，文本框，下拉菜单等． Contact Form 7插件安装： 1.下载Contact Form 7插件，将压缩包解压后，把文件夹...

    巧用jQuery选择器提高写表单效率的方法

    表单中存在最多的无非就是文本、文本框、单选框、多选框。而一些表单中会有几十个甚至几百个选项。我们的目标就是以最高的效率来完成这些表单的数据获取和数据提交。 注意：如果元素ID和服务器上获取的json字段

    jQuery完全实例.rar

    context (Element, jQuery) : (可选) 作为待查找的 DOM 元素集、文档或 jQuery 对象。 示例 找到所有 p 元素，并且这些元素都必须是 div 元素的子元素。 HTML 代码: &lt;p&gt;one&lt;/p&gt; &lt;div&gt;&lt;p&gt;two&lt;/p&gt;&lt;/div&gt; &lt;p&gt;three...

    TsForm:jQuery表单验证插件

    表单验证控件 支持文本框,密码框,下拉框,单选框,多选框,文本域以及对象等等的验证,包括必填,对比,正则等等验证 使用方法: 进行验证: $("#form").TsForm(); 清空表单: $("#form").TsFormReset(); 属性: minlength:...

    零基础学HTML CSS源代码

    复选框.htm 表单复选框的用法。 密码框.htm 表单密码框的用法。 文本框.htm 表单文本框的用法。 文本域.htm 表单文本域用法。 下拉表.htm 表单下拉表的用法。 表单实例手把手....

Magicbox
Global site tag (gtag.js) - Google Analytics