一、本文目的简介:
- 使用从数据库查询出来的数据,后台映射为对象集合,JSP页面加载显示复选框;
- 设置集合对象"是否选中"属性,实现checkbox动态选中
二、
- 实体对象,部分代码片段如下
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">
</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、效果展示