jquery取选中值

多选

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="../jquery-1.11.2.min.js"></script>
</head>

<body>
<div>全选：<input type="checkbox" id="qx" /></div>
<div>
潘庄<input type="checkbox" class="ck" value="潘庄" />
火炬公园<input type="checkbox" class="ck" value="火炬公园" />
中关村<input type="checkbox" class="ck" value="中关村" />
人民公园<input type="checkbox" class="ck" value="人民公园" />
王府井<input type="checkbox" class="ck" value="王府井" />
</div>
<br />
<div><input type="button" value="取选中项的值" id="btn" /></div>
<br />
<div>
请输入区域：<input type="text" id="qy" />
<input type="button" value="设置选中" id="szxz" />
</div>
</body>
<script type="text/javascript">
$(document).ready(function(e) {
	
    $("#qx").click(function(){
		//找到全选按钮的选中状态
		var xz = $(this).prop("checked");
		//将复选框列表里面的所有复选框的选中状态变为全选的选中状态
		$(".ck").prop("checked",xz);
		
		})
		
	$("#btn").click(function(){
		
		var ck = $(".ck");
		
		for(var i=0;i<ck.length;i++)
		{
			//ck[i].checked
			if(ck.eq(i).prop("checked"))
			{
				alert(ck.eq(i).val());
			}
			
		}
		})
		
	$("#szxz").click(function(){
		
		//获取用户输入的值
		var qy = $("#qy").val();
		//设置选中
		var ck = $(".ck");
		ck.prop("checked",false);
		for(var i=0;i<ck.length;i++)
		{
			if(ck.eq(i).val()==qy)
			{
				ck.eq(i).prop("checked",true);
			}
		}
		
		
		})	
	
});
</script>
</html>

　　单选

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="../jquery-1.11.2.min.js"></script>
</head>

<body>
<div>
潘庄<input type="radio" name="qy" class="ck" value="潘庄" />
火炬公园<input type="radio" name="qy" class="ck" value="火炬公园" />
中关村<input type="radio" name="qy" class="ck" value="中关村" />
人民公园<input type="radio" name="qy" class="ck" value="人民公园" />
王府井<input type="radio" name="qy" class="ck" value="王府井" />
</div>
<br />
<div><input type="button" value="取选中值" id="btn" /></div>
</body>
<script type="text/javascript">
$(document).ready(function(e) {
    
	$("#btn").click(function(){
		
		var ck = $(".ck");
		for(var i=0; i<ck.length;i++)
		{
			if(ck.eq(i).prop("checked"))
			{
				alert(ck.eq(i).val());
			}
		}
		
		})
	
});
</script>
</html>

　　下拉列表

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="../jquery-1.11.2.min.js"></script>
</head>

<body>
<select id="qy">
	<option value="1">所有</option>
    <option value="潘庄">潘庄</option>
    <option value="火炬公园">火炬公园</option>
    <option value="中关村">中关村</option>
    <option value="人民公园">人民公园</option>
    <option value="王府井">王府井</option>
</select>
<input type="button" value="取选中值" id="btn" />
<br />
<br />
<div>请输入值：
<input type="text" id="zhi" />
<input type="button" value="设置选中" id="szxz" />
</div>
</body>
<script type="text/javascript">
$(document).ready(function(e) {
    $("#btn").click(function(){
		
		alert($("#qy").val());
		
	})
	
	$("#szxz").click(function(){
		
		var zhi = $("#zhi").val();
		
		//var op = $("option");
		
	/*	for(var i=0; i<op.length;i++)
		{
			//op.eq(i).prop("selected");
			if(op.eq(i).val() == zhi)
			{
				op.eq(i).prop("selected",true);
			}
		}*/
		
		$("#qy").val(zhi);
	})
});
</script>
</html>

　　

posted @ 2016-06-25 21:16  格调evo  阅读(210)  评论(0)    收藏  举报