<!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. php -- PDO属性设置

    设置PDO在处理数据的过程中采用什么方式去处理 PDO::setAttribute:设置属性 PDO::getAttribute:获取属性 语法: bool PDO::setAttribute ( i ...

  2. php -- 文件操作类（文件或文件夹的：创建、删除、复制、移动）

    <? /** * 操纵文件类 * * 例子: * FileUtil::createDir('a/1/2/3'); 测试建立文件夹 建一个a/1/2/3文件夹 * FileUtil::create ...

  3. 转载：基于Redis实现分布式锁

    转载:基于Redis实现分布式锁  ,出处: http://blog.csdn.net/ugg/article/details/41894947 背景在很多互联网产品应用中,有些场景需要加锁处理,比如 ...

  4. AWS系列-S3实现文件服务页面展示

    最近由于业务需求,对于备份的数据存放到S3上面,并需要页面展示.而且还能下载. 把这个桶里面的对象,都在某个静态页面展示.并且 我可以把这个对象下载下来. 首页内容就是 桶里面的对象. 并且可以随时查 ...

  5. iOS开发之 -- bundle程序束的制造

    我们在写项目的时候,需要添加大量的图片,这个时候除了在x-code-->Assets文件里面添加图片外,还可以添加程序束,这样的话 项目看起来比较整齐,也显得比较专业,下面就来说一下程序束的制造 ...

  6. 第十篇：Linux中权限的再讨论( 上 )

    前言 在Linux系统中,用户分为 个权限位.好了,很多朋友对于Linux权限的了解就仅限于此了.但,Linux目录权限和文件权限一样吗?内核对于权限的检查过程又是怎样的? 如果你不清楚,本文将为你解 ...

  7. weX5如何绑定KO对象

    define(function(require){ var $ = require("jquery"); var justep = require("$UI/system ...

  8. [SCOI2010]序列操作[分块or线段树]

    #include<cstdio> #include<iostream> #define lc k<<1 #define rc k<<1|1 using ...

  9. ListView.setDivider，自定义的Devider

    ListView lv = getListView(); ColorDrawable sage = new ColorDrawable(this.getResources().getColor(R.c ...

  10. Block Formatting Contexts (块级格式化上下文) 使用参考

    转自:http://kayosite.com/block-formatting-contexts-in-detail.html 在上文<详说清除浮动>中,Kayo 较为详细地介绍了 BFC ...