1.全选和取消全选:
<td class="rd8">
<input type="checkbox" name="checkbox" id="checkbox" value="<%= tongjiList[i].id %>">
</td>
<button id='checkAll'>全选</button>
<button id='cancelCheckAll'>取消全选 </button>
<input type="checkbox" name="checkbox" id='checkAllAndcancelCheckAll()'>反选</button>
<script>
//全选
$("#checkAll").click(function() {
if (this.checked) {
$("input[name='checkbox']:checkbox").each(function() {
//遍历所有的name为checkbox的 checkbox
$(this).attr("checked", true);
})
}
})
//取消全选
$("#cancelCheckAll").click(function() {
if (this.checked) {
$("input[name='checkbox']:checkbox").each(function() {
//遍历所有的name为checkbox的 checkbox
$(this).attr("checked", false);
})
}
})
//反选
$("#checkAllAndcancelCheckAll").click(function() {
$("input[name='checkbox']:checkbox").each(function () {
//遍历所有的name为checkbox的 checkbox
$(this).attr("checked", !$(this).attr("checked"));
if (!$(this).attr("checked") == false) {//全选
//获取全部的id...
} else {//取消全选
ids = []
localStorage.removeItem('ids')
}
})
})
</script>
2.遍历checkbox并获取选中的:
$.each(data.data.list, function (i, t) {//data.data.list后台数组
$("#userPermission").append(`<input type="checkbox" name="userPermission" value="` + t.id + `" title="` + t.remarks + `">`);
})
let str = [] //所有选中的id
$("[name='userPermission']").each(function () {
if ($(this).is(":checked")) {
str.push($(this).val())
}
})
渲染选中数据:
$("[name='userPermission']").each(function () {
$(this).prop("checked", false);
$(this).attr("checked", false);
if (data.permissionList) {
data.permissionList.forEach(item => {
if (item.id == Number($(this).val())) {
$(this).prop("checked", true);
$(this).attr("checked", true);
}
})
}
})