checkbox复选框动态加载数据库数据

一、本文目的简介：

1.  使用从数据库查询出来的数据，后台映射为对象集合，JSP页面加载显示复选框；
2.  设置集合对象"是否选中"属性，实现checkbox动态选中

二、

1. 实体对象，部分代码片段如下

public class CustomerLevel {

	/** 等级编号**/
	private String levelCode;
	/** 等级名称**/
	private String levelName;
	/**是否选中*/
	private boolean checked;
	public String getLevelCode() {
		return levelCode;
	}
	public void setLevelCode(String levelCode) {
		this.levelCode = levelCode;
	}
	public String getLevelName() {
		return levelName;
	}
	public void setLevelName(String levelName) {
		this.levelName = levelName;
	}
	public boolean isChecked() {
		return checked;
	}
	public void setChecked(boolean checked) {
		this.checked = checked;
	}
	
}

2.action层定义List,用以接收从数据库查询出来的集合对象，生成setter方法

private List<CustomerLevel> customerLevels;

public List<CustomerLevel> getCustomerLevels() {
		return customerLevels;
}
public void setCustomerLevels(List<CustomerLevel> customerLevels) {
		this.customerLevels = customerLevels;
}

public String queryCustLeves(){
		customerLevels = customerLevelService.queryCustomerLevel(customerLevel);
		return SUCCESS;
}

3.JSP加载LIST 

<tr height="35px">
	<td class="tdClass" align="left">
			客户等级:
	</td>
 <s:iterator value="customerLevels" status="cust"> 
	<td>

        <!-- 根据状态判断是否已选中 -->
		<input type="checkbox" id="custLeveL" value="<s:property value='customerLevels[#cust.index].levelCode'/>" 
			<s:if test='customerLevels[#cust.index].checked==true'>checked="checked"</s:if>  onclick="getCheckEvent(this);"/>
			<label>
                    <!--checkbox标签名称（对象属性） -->
				<s:property  value="customerLevels[#cust.index].levelName"/>
			</label>
	</td>
   <!-- 每3个checkbox一行 -->
	<s:if test="(#cust.index+1) % 3 == 0">
		</tr>
			<tr height="35px">
				<td class="tdClass" align="left">
						&nbsp;&nbsp;&nbsp;&nbsp;
			</td>
	</s:if>
	<s:if test="#cust.last">
			 </tr>
	</s:if>
</s:iterator>

4、JS控制复选框是否选中，复选框点击前如果默认选中，再次点击则不选中，反之，则选中。

<script type="text/javascript">
    function getCheckEvent(obj){
			if($(obj).is(':checked')){
				 $(obj).prop('checked', false);
			}else{
				$(obj).prop('checked', true);
			}
		}
</script>

5、效果展示