代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/jquery-3.3.1.min.js"></script>
<script>
//全选事件
function selectAll(checkObj){
$(".itemSelect").prop("checked", $(checkObj).prop("checked"));
// alert($(checkObj).prop("checked"));值为true、false
}
$(".itemSelect").click();//反选即为每个复选框执行依次点击事件,即可实现反选
//所有.itemSelect注册点击事件,注册点击事件的目的是在多选框被全选中的情况下,也能使多选按钮被选中。
$(function() {
$(".itemSelect").click(function(){
$(".itemSelect:checked").length == $(".itemSelect").length ? $("#allCheck").prop("checked", true) : $("#allCheck").prop("checked", false);
});
});
//反选事件:
function reverseBtn(){
}
</script>
</head>
<body>
<table id="tab1" border="1" width="800" align="center" >
<tr>
<td colspan="5"><input type="button" value="反选" οnclick="reverseBtn()"></td>
</tr>
<tr>
<th><input type="checkbox" οnclick="selectAll(this)" id="allCheck"></th>
<th>分类ID</th>
<th>分类名称</th>
<th>分类描述</th>
<th>操作</th>
</tr>
<tr>
<td><input type="checkbox" class="itemSelect"></td>
<td>1</td>
<td>手机数码</td>
<td>手机数码类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td><input type="checkbox" class="itemSelect"></td>
<td>2</td>
<td>电脑办公</td>
<td>电脑办公类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td><input type="checkbox" class="itemSelect"></td>
<td>3</td>
<td>鞋靴箱包</td>
<td>鞋靴箱包类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td><input type="checkbox" class="itemSelect"></td>
<td>4</td>
<td>家居饰品</td>
<td>家居饰品类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
</table>
</body>
</html>
实现全选反选的另外一种代码:
<script>
//全选事件
function selectAll(checkObj){
$(".itemSelect").prop("checked", $(checkObj).prop("checked"));
// alert($(checkObj).prop("checked"));值为true、false
}
//所有.itemSelect注册点击事件
/*$(function () {
$(".itemSelect").click(function(){
if(!$(this).prop("checked")){
$("#allCheck").prop("checked",false);
}else{
if($(".itemSelect:checked").length==$(".itemSelect").length) {
$("#allCheck").prop("checked", true);
}
}
});
});*/
//注册点击事件的方式:
$(function() {
$(".itemSelect").click(function(){
$(".itemSelect:checked").length == $(".itemSelect").length ? $("#allCheck").prop("checked", true) : $("#allCheck").prop("checked", false);
});
});
//反选事件:
function reverseBtn(){
// $(".itemSelect").click();
//反选的白痴实现方式:
$(".itemSelect").each(function(index, element){
$(element).prop("checked",!$(element).prop("checked"));
});
$(".itemSelect:checked").length == $(".itemSelect").length ? $("#allCheck").prop("checked", true) : $("#allCheck").prop("checked", false);
}
</script>