多选
<!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>