jquery操作input标签

最新推荐文章于 2024-04-26 18:40:12 发布

wive

最新推荐文章于 2024-04-26 18:40:12 发布

阅读量749

点赞数

文章标签： jquery input标签

本文链接：https://blog.csdn.net/javadhh/article/details/36624619

版权

前端技术专栏收录该内容

41 篇文章 0 订阅

订阅专栏

<!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>Untitled Document</title>
		<script type="text/javascript" src="../js/jquery-1.4.2.js"></script>
		<script type="text/javascript" >
			window.οnlοad=function(){
				//得到所有的按钮
				var $buttons = $("input[type=button]");
				//使单选下拉框的'2号'被选中
				$buttons.eq(0).click(function(){
					//方法一：
					//$("#one option").eq(1).attr("selected",true);
					//方法二：
					//$("#one").val("2号");
					//方法三:
					$("#one").children().eq(1).attr("selected",true);
				});
				//使多选下拉框选中的'2号'和'5号'被选中
				$buttons.eq(1).click(function(){
					//$("#many").val(["2号","5号"]);  //方法一
					$("#many option").attr("selected",null); //先清空其他的选项	
					$("#many option").eq(1).attr("selected",true);
					$("#many option").eq(4).attr("selected",true);
				});
				//使复选框的'复选2'和'复选4'被选中
				$buttons.eq(2).click(function(){
					$("input[name=c]").eq(1).attr("checked",true);
					$("input[name=c]").eq(3).attr("checked",true);
				});
				
				//使单选框的'单选2'被选中
				$buttons.eq(3).click(function(){
					$("input[name=r]").eq(1).attr("checked",true);
				});
				
				//打印已经被选中的值***
				$buttons.eq(4).click(function(){
					$("select option:selected").each(function(){
						alert($(this).val());
					});
					//带两个条件的写法，按照题意只要去掉[name=c]这个条件即可
					$("input[type=checkbox][name=c]:checked").each(function(){
						alert($(this).val());
					});
				});
			}
			
		</script>
	</head>
	<body>
		<input type="button" value="使单选下拉框的'2号'被选中"/><br>
		<input type="button" value="使多选下拉框选中的'2号'和'5号'被选中"/><br>
		<input type="button" value="使复选框的'复选2'和'复选4'被选中"/><br>
		<input type="button" value="使单选框的'单选2'被选中"/><br>
		<input type="button" value="打印已经被选中的值"><br>
		<br/>
		
		<select id="one">
		  <option>1号</option>
		  <option>2号</option>
		  <option>3号</option>
		</select>
		
		<select id="many" multiple="multiple" style="height:120px;">
		  <option selected="selected">1号</option>
		  <option>2号</option>
		  <option>3号</option>
		  <option>4号</option>
		  <option>5号</option>
		  <option selected="selected">6号</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>

wive

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jquery操作input标签

Untitled Document window.onload=function(){ //得到所有的按钮 var $buttons = $("input[type=button]"); //使单选下拉框的'2号'被选中 $buttons.eq(0).click(function(){ //方法一： //$("#one opti
复制链接

扫一扫

专栏目录