<!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. ubuntu 14.04/16.04/18.04 yum安装 zabbix-agent 教程

    备忘 环境:Ubuntu 14.04 基于官网配置官网链接 ①导入源: ### Ubuntu 18.04 # wget https://repo.zabbix.com/zabbix/3.4/ubunt ...

  2. 嵌入式开发之gb281818

    http://www.cnblogs.com/snake-hand/p/3157176.html http://blog.csdn.net/voipmaker/article/category/140 ...

  3. 小结：bfs

    概要: 我们在初始状态要到达终止状态可以沿着同深度的向下搜索,这样范围覆盖更广,在解的深度较小的时候十分适用. 技巧及注意: 所有状态在转移后如果要打标记一定要在进队列前打!不要在出队列才打!否则就是 ...

  4. Python pycurl使用

    pycurl的学习 (2013-09-26 10:40:31) 转载▼   分类: python pycurl的使用 pycurl是curl的一个python版本. pycurl的使用说明: pycu ...

  5. RESTful作用与特性

    最近在项目中要使用rest风格的设计,学习了一下. 知乎网友说的一句话精确的解释了REST: URL定位资源,用HTTP动词(GET,POST,DELETE,DETC)描述操作-(https://ww ...

  6. myForm.js

    根据控件名,重现一些特殊的表单项,生成html var can_submit = true; function myForm($form_id, $id_value, province, city, ...

  7. 应用开发之WinForm环境

    本章简言 上一章笔者讲到关于IO文件操作类,了解如何处理文件流.从这一章开始笔者将讲解相对比较高级的知识点.而本章笔者就对WinForm开发的知识点进行讲解和引导.现在很多业务都是面向于B/S模式的开 ...

  8. studio导入Eclipse 项目要改的文件

    添加下面文件即可,一个不能少 1. project 2.project.properties 3.classpath 4.AndroidManifest.xml 以上目录都有可以正常导入studio中

  9. json的循环

    通过for in: var json = {width: '200px', height: '200px', background: 'green'}; var i = ''; for(i in js ...

  10. IIS中，当文件夹被删除时，防止应用程序重启的解决办法

    如果你曾经修改了ASP.NET应用程序(dll文件),与修改了bin文件夹或Web.config文件(添加/删除/重命名的文件等),而该网 站在运行,你可能已经注意到,这将导致在AppDomain的重 ...