jQuery支持下的全选按钮与全不选操作
效果如下:
全选按钮设置
引入jQuery
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-3.3.1.js"></script>
全选按钮:
<input type="checkbox" id="all" οnclick="allClick()" style="margin-left: 50px"> 全选
每一个按钮:
每一个按钮是放在了一个table表格中,循环遍历的每一个
<input type="checkbox" name="ck" id="ck"
value="${p.pId}" οnclick="ckClick()">
点击事件
<script type="text/javascript">
function allClick() {
//取得全选复选框的选中未选 中状态
var ischeck = $("#all").prop("checked");
//将此状态赋值给每个商品列表里的复选框,each循环选中状态
$("input[name=ck]").each(function () {
this.checked = ischeck;
});
}
function ckClick() {
//取得所有name=ck的被选中的复选框
var length = $("input[name=ck]:checked").length;
//取得所有name=ck的复选框
var len = $("input[name=ck]").length;
//比较
if (len == length) {
$("#all").prop("checked", true);
} else {
$("#all").prop("checked", false);
}
}
</script>