<!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. Instant Run requires 'Tools | Android | Enable ADB integration' to be enabled.

    更新了最新的Android Studio预览版之后,运行程序.发现弹出了一个Error Instant Run requires 'Tools | Android | Enable ADB integ ...

  2. CI -- $this->load->library()详解

    我第一次加载失败,原来是文件名和类名不同的原因,先总结关于CI加载你自己的类文件注意事项: 1.第三方加载文件应放在application/libraries文件下 2.文件名和类名应该相同,并且首字 ...

  3. leetCode 77.Combinations (组合)

    Given two integers n and k, return all possible combinations of k numbers out of 1 ... n. For exampl ...

  4. 通用性能测试过程模型GAME（A）

    1.3.1  Goal(定义目标) 制定一个明确而详细的测试目标是性能测试开始的第一步,也是性能测试成功的关键. 本步骤的开始时间:需求获取阶段 本步骤的输入:性能需求意向 本步骤的输出:明确的性能测 ...

  5. Linux系统下MySQL数据库的备份和恢复

    当我们MySQL数据库保存重要数据的时候,备份工作极为重要.本文介绍如何使用mysqldump备份和恢复数据,使用该方法,可以将数据库中的数据备份成一个文本文件,也可将备份好的数据库迁移到另一台的服务 ...

  6. Tanks案例笔记(一、场景搭建)

    一.场景搭建 1.首先我们导入案例的资源,然后新建一个空场景: 2.资源中为我们准备的场景的预制,我们直接把LevelArt预制拖到Hierarchy面板: 3.移除场景中默认的光源: 4.确保物体的 ...

  7. 大圣画廊v0.2（2015.7.17）

    0.2版本号加入的功能 以tag分类图片 美化.添加瀑布流效果 添加tag页和单张图片页 添加公布图片页 以下是具体解释. 每添加一个功能,都要从模型.模板,视图,路由四个方面一一改动. 模型:添加t ...

  8. ios应用, 设置不自己主动备份到iCloud

    原创文章,转载请注明出处 ios项目,假设有内置下载或者程序动态生成文件的话,就要注意所下载或生成的文件,要不要自己主动备份到iCloud 假设没有合适的理由就自己主动上传大文件的话,可能在不能通过应 ...

  9. iOS开发之-- 从当前隐藏导航界面push到下一个显示导航界面出现闪一下的问题

    在修改项目代码的过程中,遇到一个问题,就是比如主页面的导航栏是隐藏的,但是需要push到别的页面,这个时候,会出现导航栏闪一下的情况, 下面是我写的一种方案,也就是在loadView这个生命周期函数中 ...

  10. 动态规划——最长公共上升子序列LCIS

    问题 给定两个序列A和B,序列的子序列是指按照索引逐渐增加的顺序,从原序列中取出若干个数形成的一个子集,若子序列的数值大小是逐渐递增的则为上升子序列,若A和B取出的两个子序列A1和B1是相同的,则A1 ...