checkbox的使用（初始化、赋值、取值）

checkbox的使用（初始化、赋值、取值）

jsp

checkbox是通过name属性进行传值的，在初始化时需要注意name属性

初始化

<label for="ledSubtitle" class="col-xs-1 control-label" style="padding-top: 7px;margin-left: 0%;">LED字幕</label>
<div id="ledSubtitle-div" class="col-xs-1">
	<input type="checkbox" style="height: 25px;" id ="ledSubtitle" name="ledSubtitleFlag" onchange="checkboxOnclick(ledSubtitle)">
</div>

name=“ledSubtitleFlag” ，name属性与bean中属性对应

checkboxOnclick(）

   //判断复选框是否选中，选中时显示数量框，否则数量框隐藏
   function checkboxOnclick(checkbox){
   	//参会人员数量
   	var personnelNumber = $("#personnelNumber").numberbox("getValue");
   	//字幕内容
   	if (checkbox == ledSubtitle && checkbox.checked == true) {
   		$("#subtitleContent-label").show();
   		$("#subtitleContent-div").show();
	}else if(checkbox == ledSubtitle && checkbox.checked == false){
		$("#subtitleContent-label").hide();
   		$("#subtitleContent-div").hide();
	}
   }

Bean

private String ledSubtitleFlag;				//led字幕等checkbox标识符
private String projectorFlag;				//投影仪
private String projectionPenFlag;			//投影笔
public String getLedSubtitleFlag() {
		return ledSubtitleFlag;
	}
	public void setLedSubtitleFlag(String ledSubtitleFlag) {
		this.ledSubtitleFlag = ledSubtitleFlag;
	}
	public String getProjectorFlag() {
		return projectorFlag;
	}
	public void setProjectorFlag(String projectorFlag) {
		this.projectorFlag = projectorFlag;
	}
	public String getProjectionPenFlag() {
		return projectionPenFlag;
	}
	public void setProjectionPenFlag(String projectionPenFlag) {
		this.projectionPenFlag = projectionPenFlag;
	}

Model

@Column(name = "PROJECTOR_")
protected Boolean projector; 				//投影仪
	
@Column(name = "PROJECTION_PEN_")
protected Boolean projectionPen; 			//投影笔

实现类

//根据flag，获取LED字幕的勾选状态
if(StringUtils.isNotEmpty(bean.getLedSubtitleFlag()) && bean.getLedSubtitleFlag().equals("on")) {
	entity.setLedSubtitle(true);
 }else {
	entity.setLedSubtitle(false);
}
 //投影仪
 if (StringUtils.isNotEmpty(bean.getProjectorFlag()) && bean.getProjectorFlag().equals("on")) {
	entity.setProjector(true);
}else {
	entity.setProjector(false);
}

取值

//投影笔
$("#projectionPen").prop("checked",'${entity.projectionPen}'=="true"?true:false);
//激光电视
 $("#laserTV").prop("checked",'${entity.laserTV}'=="true"?true:false);

选中、不选中显示、隐藏相关信息

//抽纸数量
if ("${entity.tissues}"=="true"?true:false) {
	$("#tissuesNumber-label").show();
	$("#tissuesNumber-div").show();
}else {
	$("#tissuesNumber-label").hide();
	$("#tissuesNumber-div").hide();
}
//工作餐数量
var workingMealType = $("#workingMealType").combobox("getValue");
if (workingMealType != '' && workingMealType != 9701483) {
	$("#workingMealNumber-label").show();
    $("#workingMealNumber-div").show();
}else {
	$("#workingMealNumber-label").hide();
    $("#workingMealNumber-div").hide();
}

判断checkbox是否被选中

根据id，通过onclick方法判断复选框是否被选中

$(’#ledSubtitle’).is(’:checked’)
选中返回true；没选中返回false

//服务内容如果选中则需要输入数量
//LED字幕
if ($('#ledSubtitle').is(':checked')) {
   	//字幕内容
   	var subtitleContent = $("#subtitleContent").val();
    if (subtitleContent == '') {
       inputTips('请输入字幕内容', 'subtitleContent', false);
       return false;
   	}
}

设置只读模式

//编辑时激光电视不能进行修改
$("#laserTV").attr(“onclick”, “return false;”);