1.Html代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!-- 引入Jquery -->
<script type="text/javascript" src="js/jquery-1.11.2.js"></script>
<!--引入自定义js -->
<script type="text/javascript" src="js/myAllCheckBox.js"></script>
</head>
<body>
<input type="checkbox" id="fbtn" onclick="allCheckBox();" /><span id="spanss">全选</span><br />
<input type="checkbox" class="fbtn" value="足球" />足球<br />
<input type="checkbox" class="fbtn" value="篮球"/>篮球<br />
<input type="checkbox" class="fbtn" value="乒乓球"/>乒乓球<br />
<input type="checkbox" class="fbtn" value="羽毛球"/>羽毛球<br />
</body>
</html>
2.JS代码:
// 全选|反选checkbox按钮
var b=true;
function allCheckBox(){
if($("#fbtn :checked")){
if(b){
$("input[class='fbtn']").each(function(){
this.checked=true;
//获取当前值
//alert($(this).val());
});
$("#spanss").html("取消");
b=false;
}else{
$("input[class='fbtn']").each(function(){
this.checked=false;
//获取当前值
//alert($(this).val());
});
$("#spanss").html("全选");
b=true;
}
}
}
在这里插入图片描述