jq,使用jQuery 前先引入 jq:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="checkbox" value="全选" id="ckAll"/>水果</br>
<p class="box">
<input type="checkbox" value="苹果" id="apple"/>苹果
<input type="checkbox" value="香蕉" id="bann"/>香蕉
<input type="checkbox" value="橘子" id="origin"/>橘子
</p>
<script src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
//给所有 .box input 元素添加 checked = ckAll 当前的状态;
//prop('checked',value) ,第一个值获取属性,第二个值:设置属性值。prop只有一个参数时,表示获取元素属性。
$('#ckAll').click(function(){
$('.box input').prop('checked',$(this).prop('checked'));
});
$('.box input').click(function(){
//each 便利每一个元素,让其执行该函数
$('.box input').each(function(){
if(!$(this).prop('checked')){
$('#ckAll').prop('checked',false);
//有一个不满足就 跳出该循环,避免执行下面
return false;
}else{
$('#ckAll').prop('checked',true);
}
})
})</script>
</body>
</html>
更多相关内容:
-
无相关信息
