layui和JQuery根据数据库给复选框设置默认被选中checked

本文链接：https://blog.csdn.net/qq_33048333/article/details/80609553

本文介绍了如何结合layui和jQuery，根据从数据库获取的数据来设置页面加载时复选框的默认选中状态。重点在于layui设置checked后需要进行更新渲染以使页面复选框状态正确显示，同时展示了使用jQuery设置和检查复选框选中状态的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

设置复选框被选中

实现的效果图

根据数据库查询的数据与input标签的title的值对比，相同则页面加载时默认被选中
layui设置被选中后，必须要进行“更新渲染”后，复选框才会显示被选中，否则只是checked改变，页面复选框无变化

更新渲染

这里写图片描述

1. 页面

<form id="form" class="layui-form" action="" method="post">
	<table id="recordsTable">
		<tr class="tr-h">
			<td class="w2-10">公司类型</td>
			<td colspan="6">
				<div>
					<c:set value="0" var="status" scope="page"/>
					<input type="checkbox" name="unitTypy" title="企业（分公司/其他）" lay-skin="primary"> 
					<input type="checkbox" name="unitTypy" title="事业单位" lay-skin="primary"> 
					<input type="checkbox" name="unitTypy" title="其他组织" lay-skin="primary"> 
				</div>
			</td>				
	</table>
</form>

2. script

<script> 
	layui.use([ 'layer', 'form', 'element' ], function() {
		var $ = layui.jquery, 
		layer = layui.layer, 
		form = layui.form, 
		element = layui.element;
		/* 自适应页面 */
		resizeTheWindow();
		/* 视窗变化监听 */
		window.onresize = function() {
			resizeTheWindow();
		}
		$(document).ready(function(){
			$.ajax({
				type: "GET",
				url: "${pageContext.request.contextPath}/***/***" ,
				dataType: "json",
				cache: false,
				async: false,
				success : function(data) {
					//给公司类型赋值并设置默认选中
					var unitType=[];
					unitType=data.unittypy.split(",");
					for(var j=0;j<unitType.length;j++){
						var unitTypeCheckbox=$("input[name='unitTypy']");
						for(var i=0;i<unitTypeCheckbox.length;i++){
							if(unitTypeCheckbox[i].title==unitType[j]){
								unitTypeCheckbox[i].value=unitType[j];
								unitTypeCheckbox[i].checked=true;
							}
						}
						form.render();  //更新渲染
					}		
				},
				complete : function(XMLHttpRequest, textStatus) {},
				ifModified : false,
				error : function() {}
			});
		});
		/* 自适应页面 */
		function resizeTheWindow() {
			var screenWidth = parseInt(document.documentElement.clientWidth * 0.6);
			var surplusWidth = ((screenWidth - 210) > 754)?(screenWidth - 210):754;
			document.getElementById('contentContainer').style.width = surplusWidth + 'px';
		}
	});
</script>

jQuery设置checked的方法

设置复选框的选中或取消

$("[name='checkbox']").attr("checked",'true');//全选 

$("[name='checkbox']").removeAttr("checked");//取消全选

$("[name='checkbox']:even").attr("checked",'true');//选中所有奇数

设置某个被选中

$("#input").prop("checked",true); 
$("[name='unittype']").prop("checked",true);
$("[name='checkbox1']").attr("checked",'true');

判断复选框是否被选中

var isChecked = document.getElementById("share_all").checked; //js判断checkbox的选中状态

var isChecked = $("#checkbox_id").attr("checked")=="checked"; //jquery判断checkbox的选中状态