复选框读取数据，分割字符串转换成数组，显示复选框选中。

最新推荐文章于 2022-12-24 09:31:02 发布

原创最新推荐文章于 2022-12-24 09:31:02 发布 · 1.6k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#复选框分割字符串

前端初步专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一种使用JSP和JavaScript来设置和读取表单中能源类型的多选框的方法。该方法允许用户选择多种能源类型，包括深层地热、浅层地热、污水和燃气等，并提供了额外的自定义选项。通过JavaScript处理后端传来的数据，自动勾选相应的选项。

JSP部分：

<div class="form-group">	
			<label class="col-md-3 control-label">能源类型：</label>
				<div>
					<label class="checkbox-inline">
						<input type="checkbox" id="Checkbox1" name="energyType" value="深层地热"> 深层地热
						</label>
					<label class="checkbox-inline">
						<input type="checkbox" id="Checkbox2" name="energyType" value="浅层地热"> 浅层地热
					</label>
					<label class="checkbox-inline">
						<input type="checkbox" id="Checkbox3" name="energyType" value="污水"> 污水
					</label>
					<label class="checkbox-inline">
						<input type="checkbox" id="Checkbox4" name="energyType" value="燃气"> 燃气
					</label>
					<label class="checkbox-inline">
						<input type="checkbox"  id="Checkbox6" value="其它" onclick="energyTypeCheck(this);"> 其它
						<input style="display:none;" name="energyType" type="text" id="Checkbox5"/>
					</label>
				</div>
</div>

JS部分：

var strs= new Array(); //定义一数组
var str="${data.energyStationRet.energyType}";
strs=str.split(","); //字符分割


for (i=0;i<strs.length ;i++ )
{	
	console.log(strs[i].trim());
	if(strs[i].trim() == "深层地热") {
		$("#Checkbox1").attr("checked","true");
	}
	else if(strs[i].trim() == "浅层地热") {
		$("#Checkbox2").attr("checked","true");
	}
	else if(strs[i].trim() == "污水") {
		$("#Checkbox3").attr("checked","true");
	}
	else if(strs[i].trim() == "燃气") {
		$("#Checkbox4").attr("checked","true");
	}
	else if(strs[i].trim() == "") {
	}
	else {
		$("#Checkbox6").attr("checked","true");
		var Checkbox5 = document.getElementById('Checkbox5');
		Checkbox5.style.display='inline-block';
		Checkbox5.value = strs[i].trim();
		
	}
	
} 
/*弹出部分*/
 function energyTypeCheck (chk) {
	var Checkbox5 = document.getElementById('Checkbox5');
	if (chk.checked) {
		Checkbox5.style.display='inline-block';
	}else {
		Checkbox5.style.display='none';

	}
}