复选数据框
<!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="餐厅" />
</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++)
{
//取JQUERY对象
//ck.eq(i).prop("checked");
//取DOM对象
//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="餐厅" />
</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循环输出
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>
</select>
<input type="button" value="取选中值" id="btn" /><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>
时间： 2024-10-06 07:51:42