【jquery】实现复选框checkbox相关功能:

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);
			}
		})
	}
})

3.问题:

jquery报错$(this).attr(‘checked‘)undefined/checkbox无法改变其状态: