jQuery选择器之表单选择器

最新推荐文章于 2024-04-16 03:29:12 发布

救救孩子把

最新推荐文章于 2024-04-16 03:29:12 发布

阅读量1.6k

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/yuanmomoya/article/details/82192879

版权

jQuery 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

点击相应的按钮，对应实现变化

val方法会根据传入的value值去下拉选框中将和他对应的option选中

单选框和复选框通过val方法设置选中时需要通过js数组传参，这就要val(["radio2"]) [ ]的使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>表单选择器(空白)</title>
		<script type="text/javascript" src="../../script/jquery-1.7.2.js"></script>
		<script type="text/javascript">
			$(function(){
				$("input:button:eq(0)").click(function(){
					//使单选下拉框的'选择3号'被选中
					//$("#single>option:last").attr("selected" , true);
					$("#single").val(["sel03"]);//val方法会根据传入的value值去下拉选矿中将和他对应的option选中
				});
				$("input:button:eq(1)").click(function(){
					//使多选下拉框选中的'选择2号'和'选择4号'被选中
					$("#multiple").val(["mul02","mul04"]);
				});
				$("input:button:eq(2)").click(function(){
					//使多选框的'多选2'和'多选4'被选中
					$("input[name='c']").val(["check2" , "check4"]);
				});
				$("input:button:eq(3)").click(function(){
					//使单选框的'单选2'被选中 
					//input 除了单选按钮还有复选框  还有文本框... 
					$("input[name='r']").val(["radio2"]);//单选框和复选框通过val方法设置选中时  需要通过js数组传参
				});
				$("input:button:eq(4)").click(function(){
					//打印已经被选中的值
					$("input:checked,option:selected").each(function(){
						alert(this.value);
					});
				});
			});
		
		</script>
	</head>
	<body>
		
		<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="single">
		  <option value="sel01">选择1号</option>
		  <option value="sel02">选择2号</option>
		  <option value="sel03">选择3号</option>
		</select>
		
		<select id="multiple" multiple="multiple" style="height:120px;">
		  <option value="mul01" selected="selected">选择1号</option>
		  <option value="mul02">选择2号</option>
		  <option value="mul03">选择3号</option>
		  <option value="mul04">选择4号</option>
		  <option value="mul05" selected="selected">选择5号</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/>
		
		<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>

救救孩子把

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
jQuery选择器之表单选择器

点击相应的按钮，对应实现变化val方法会根据传入的value值去下拉选框中将和他对应的option选中单选框和复选框通过val方法设置选中时需要通过js数组传参，这就要val(["radio2"]) [ ]的使用 &lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&...
复制链接

扫一扫