复选框
<!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>//引用jquery包
</head>
<body>
<input type="checkbox" id="all" />全选<br />
<input class="x" type="checkbox" value="one" />aa
<input class="x" type="checkbox" value="two" />bb
<input class="x" type="checkbox" value="three"/>cc
<input class="x" type="checkbox" value="four" />dd
<input class="x" type="checkbox" value="five" />ee
<input type="button" value="测试" id="bt"/>
<input type="text" id="tx" />
<input type="button" value="设置选中" id="sz" />
</body>
<script type="text/javascript">
$(document).ready(function(e) {//写JQUERY代码在外层需要先加这么一句，类似一个范围要在这个范围里写代码，function（e）这里称呼为匿名函数；
$("#all").click(function(){//click等同于js中的on click(),但是比较而言这个更为简洁实用
var ck=$(".x")//根据class选择
var xz=$(this)[0].checked;//$(this)代表jquery元素后面加[0]转化为了dom元素
ck.prop("checked",xz); //复选框checked在jquery中存在bug，所以用prop()替代
})
$("#bt").click(function(){
var ck=$(".x");
for(var i=0;i<ck.length;i++)
{
if(ck.eq(i)[0].checked)
{
alert(ck.eq(i).val());
}
}
})
$("#sz").click(function(){//这个没有运行出来查了几遍也没发现问题，明天问同学吧
var v = $("#tx").val();
var ck = $(".x");
ck.prop("checked",false);
for(var i=0;i<ck.length;i++)
{
if(ck.eq(i).val()==v)
{
ck.eq(i).prop("checked",true);
}
}
})
});
</script>
</html>
练习
时间： 2024-10-10 15:31:10