<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>使用jQuery为文本框、单选框、多选框、下拉框、下拉多选框设值及返回值的处理</title>

<script type="text/javascript" src="jquery-1.11.1.js"></script>

<script type="text/javascript">

	$(function (){

		$(":text").blur(function (){

			var content = $("#address").val()

			content = $.trim(content);

			if(content == ""){

				this.value = this.defaultValue;		//defaultValue:是DOM中，text的默认属性值

			}

		});

		//使单选下拉框的选择3号被选中

		$(":button:eq(1)").click(function (){

			$("#sigal").val("选择3号");

		});

		//使多选下拉框选中的选择2号和选择4号被选中

		$(":button:eq(2)").click(function (){

			$("#multiple").val(["选择2号","选择4号"]);

		});

		//使多选框的多选2和多选4被选中

		$(":button:eq(3)").click(function (){

			$(":checkbox[name='c']").val(["check2","check4"]);

		});

		//使单选框的单选2被选中

		$(":button:eq(4)").click(function (){

			$(":radio[name='r']").val(["radio2"]);

		});

		$(":button:eq(5)").click(function (){

			alert($("#sigal").val());

			alert($("#multiple").val());

			//注意：此处有多个值时需要对其进行循环遍历，否则只能输出被选中的第一个值

			$(":checkbox[name='c']:checked").each(function (){

				alert($(this).val());

			});

			//radio可以不用遍历直接输出，因为被选中的只能有一个

			//而且，在选取元素的时候不要忘记加  :checked,表示备选中的

			alert($(":radio[name='r']:checked").val());

		});

	});

</script>

</head>

<body>

	<input type="text" id="address" placeholder="请输入邮箱地址" /><br/>

	<input type="text" name="password" placeholder="请输入邮箱密码" /><br/>

	<input type="button" value="登录" /><br/><br/><br/>

	<input type="button" value="使单选下拉框的选择3号被选中" />

	<input type="button" value="使多选下拉框选中的选择2号和选择4号被选中" /><br/>

	<input type="button" value="使多选框的多选2和多选4被选中" />

	<input type="button" value="使单选框的单选2被选中" /><br/>

	<input type="button" value="打印已经被选中的值" /><br/><br/>

	<select id="sigal">

		<option>选择1号</option>

		<option>选择2号</option>

		<option>选择3号</option>

	</select>

	<select id="multiple" multiple="multiple">

		<option>选择1号</option>

		<option>选择2号</option>

		<option>选择3号</option>

		<option>选择4号</option>

	</select><br/><br/>

	<input type="checkbox" name="c" value="check1" />多选1

	<input type="checkbox" name="c" value="check2" />多选2

	<input type="checkbox" name="c" value="check3" />多选3

	<input type="checkbox" name="c" value="check4" />多选4<br/><br/>

	<input type="radio" name="r" value="radio1" />单选1

	<input type="radio" name="r" value="radio2" />单选2

	<input type="radio" name="r" value="radio3" />单选3

</body>

</html>

使用jQuery为文本框、单选框、多选框、下拉框、下拉多选框设值及返回值的处理的更多相关文章

  1. jQuery获取及设置单选框、多选框、文本框内容

    获取一组radio被选中项的值 var item = $('input[@name=items][@checked]').val(); 获取select被选中项的文本 var item = $(&qu ...

  2. jQuery获取及设置单选框、多选框、文本框

    获取一组radio被选中项的值 var item = $("input[@name=items][@checked]").val(); 获取select被选中项的文本 var it ...

  3. js/jquery获取文本框的值与改变文本框的值

    我们就用它来学习获取文本框的值及改变文本框的值. 代码如下 复制代码 <script>function get1(){ document.getElementById("txtb ...

  4. jquery获取文本框的内容

    使用jquery获取文本框的内容有以下几种: 1.根据ID取值(id属性): // javascript <script type="text/javascript"> ...

  5. jQuery清除文本框，内容并设置不可用

    JQuery清除文本框,内容并设置不可用  如果是设置只读,则将disabled换成readonly function CleanText(textid) { $("#"+text ...

  6. Jquery对文本框的值、字符串的验证;正则表达式字符串的验证

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. 用Jquery控制文本框只能输入数字和字母

    用Jquery控制文本框只能输入数字和字母 $.fn.onlyNum = function () { $(this).keypress(function (event) { var eventObj ...

  8. jQuery之文本框得失焦点

    版本一 css代码部分: .focus { border: 1px solid #f00; background: #fcc; } 当焦点获得时,添加focus样式,添加边框,并改背景色为#fcc h ...

  9. jquery 实现文本框scroll上下动

    <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="C ...

随机推荐

  1. 009Maven_建立私服——报错问题

    前一篇文章的建立私服一直出问题,这里的问题是: jdk6.0只支持nuxus2.5及以下的版本,要支持nexus2.6以上,必须要jdk7.0以上.不然报错,把nexus-2.6.2war包放在Tom ...

  2. SSH无密码验证配置

    一. 准备工作 首先要确保你的linux系统中已经安装了ssh,对于ubuntu系统一般默认只安装了ssh client,所以还需要我们手动安装ssh server: sudo apt-get ins ...

  3. JAVA会将所有的错误封装成为一个对象，其根本父类为Throwable

    JAVA会将所有的错误封装成为一个对象,其根本父类为Throwable. Throwable有两个子类:Error和Exception. 一个Error对象表示一个程序错误,指的是底层的.低级的.不可 ...

  4. 【BZOJ】1693: [Usaco2007 Demo]Asteroids（匈牙利）

    http://www.lydsy.com/JudgeOnline/problem.php?id=1693 裸匈牙利.. #include <cstdio> #include <cst ...

  5. 【HDU】3622 Bomb Game（2-SAT）

    http://acm.hdu.edu.cn/showproblem.php?pid=3622 又是各种逗.. 2-SAT是一种二元约束,每个点可以置于两种状态,但只能处于一种状态,然后图是否有解就是2 ...

  6. c# windows service(服务)

    //安装%SystemRoot%\Microsoft.NET\Framework\v4.0.30319\installutil.exe WindowsServiceTest.exe //卸载%Syst ...

  7. VC++ 轻松实现“闪屏” SplashWnd

    我们平时使用的好多软件在运行启动时都会有一个“闪屏”画面显示,一般用于标识软件的一些信息,如软件版本名称.公司等,通过查找资料发现,其实实现起来很简单,一个类就能搞定! SplashWnd.h  C+ ...

  8. C++之函数模板

    C++之函数模板与模版函数 直接上代码:  C++ Code  12345678910111213141516171819202122232425262728293031323334353637383 ...

  9. lua基础(一)

    参考链接: http://blog.csdn.net/lyh916/article/details/49719697 一.注释 --这是行注释 --[[ 这是块注释 这是块注释 这是块注释 --]] ...

  10. JQuery------鼠标双击时，不选中div里面的文字

    如图:(去掉选中文字的蓝色背景色) 代码: //方法一:<div class="test" onselectstart="return false" &g ...