复选框分页记忆

最新推荐文章于 2023-06-30 14:05:35 发布

原创最新推荐文章于 2023-06-30 14:05:35 发布 · 1.1k 阅读

1 ·

CC 4.0 BY-SA版权

前端总结专栏收录该内容

2 篇文章

订阅专栏

博客探讨了在实现分页功能时如何保持复选框的选中状态，确保用户在切换页面时，已选择的复选框仍能记住其选中状态。

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

分页时保留复选框选中状态：

思路：

一、点击复选框时遍历需要复选框获取其中的值，将值拼接为字符串保留在隐藏域中；

二、将隐藏域的值放入html的sessionStorage中（类似前端缓存）；

三、取出隐藏域的值，遍历并匹配复选框的值，为其添加选中属性。

var recordGridCodes = "";
	$("input:checkbox[name='xxx']").live("click",function() {
	    var value = $(this).val();
		var codes = $("#recordGridCodes").val();
		if($(this).attr("checked")){
			recordGridCodes = codes.replace(value+",","");
			recordGridCodes+=value+","; 
		$("#recordGridCodes").val(recordGridCodes);
		}else{
			recordGridCodes = codes.replace(value+",","");
			$("#recordGridCodes").val(recordGridCodes);
		}
	    sessionStorage.setItem("recordGridCodes", $("#recordGridCodes").val());
	});

function checkboxOnClick() {
	
	var sessionValue = sessionStorage.getItem("recordGridCodes");
	var args = new Array();
	if(sessionValue !=null && sessionValue !="" && typeof(sessionValue)!=undefined){
		args = sessionValue.split(',');
	$("#Modal-query-grid input:checkbox[name='gridCodes']").each(function() {
		for(var i=0;i<args.length;i++){
			if( args[i]!="" && args[i]== $(this).val()){
				$(this).attr("checked", true);
			}  
		}
	});
	}
}