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>
	<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、效果展示