<!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. 多媒体开发之rtsp---rtsp client 端的实现

    http://blog.csdn.net/xyz_lmn/article/details/6055179 java实现 http://www.cnblogs.com/wohexiaocai/p/454 ...

  2. 使用ADO GetChunk/AppendChunk 数据库存取二进制文件图象

    在设计数据库的过程中,我们会经常要存储一些图形.长文本.多媒体(视频.音频文件)等各种各样的程序文件,如果我们在数据库中仅存储这些文件的路径信息,尽管这可以大大地减小数据库的大小,但是由于文件存在磁盘 ...

  3. Apache里的httpd-vhosts.conf详解

    首先看下面的配置: <VirtualHost *:80> ServerAdmin webmaster@dummy-host.example.com DocumentRoot "D ...

  4. Linux atop监控工具部署

    一.atop简介 atop是一款用于监控Linux系统资源与进程的工具,它以一定的频率记录系统的运行状态,所采集的数据包含系统资源(CPU.内存.磁盘和网络)使用情况和进程运行情况,并能以日志文件的方 ...

  5. 如何使用phpmyadmin建立外键约束

    之前都是用sql语句进行的主外键的关联,现在用可视化的phpmyadmin感觉方便了很多,但是在做主外键约束的时候却十中找不到操作在哪里.网上搜索的也是千奇百怪五花八门的,都说的很晦涩,很多都说需要使 ...

  6. UIScrollView小记

    视图的滚动过程,其实是在不断修改原点坐标.当手指触摸后,ScrollView会暂时拦截触摸事件,使用一个计时器.假如在计时器到点后没有发生手指移动事件,那么ScrollView发送tracking e ...

  7. 用MCI处置WAV视频时，怎样才能让视频在当前窗口播放

    用MCI处理WAV视频时,怎样才能让视频在当前窗口播放MCI播放视频默认是新开一个窗口播放,播放完毕返回原来的窗口,想着原来窗口播放如何做? mciSendCommand或mciSendString怎 ...

  8. 模拟http请求 带 chunked解析办法二

    以PHP代码为例 //这个是解析chuned块 get_chunk_data($fsock) { $data = ''; while(true) { $len = hexdec(fgets($fsoc ...

  9. 【BZOJ2095】[Poi2010]Bridges 动态加边网络流

    [BZOJ2095][Poi2010]Bridges Description YYD为了减肥,他来到了瘦海,这是一个巨大的海,海中有n个小岛,小岛之间有m座桥连接,两个小岛之间不会有两座桥,并且从一个 ...

  10. Maven开发系统

    Maven的优点: 自动从互联网中获取jar包,并实现了一步构建. pom.xml的配置 依赖管理(导入对应的jar包) 通过坐标(定位到仓库中的包的位置,并将jar包导入到项目中,如果版本升级,只需 ...