用label for将文本、图片与checkbox关联起来,点击文本或图片都能实现checkbox的选中与不选中。
<%
for (int i = 0; i < options.length; i++) {
%>
<div class="clsFeedbackBg" οnclick="changeImg()">
<table>
<tr>
<td width="90%" style="padding-left: 3%">
<label class="clsFeedbackContent" id="<%="op" + i%>" for="<%="option" + i%>"><%= options[i]%></label>
</td>
<td width="10%" >
<input class="clsCheckBox" type="checkbox" id="<%="option" + i%>" name="feedbacks" value="<%=i%>" />
<label for="<%="option" + i%>">
<img id="<%="image" + i %>" src="<%=imageCommonUrl%>check_box_unfocused.png"/>
</label>
</td>
</tr>
</table>
</div>
<%}%>
把checkbox的样式隐藏,显示图片 ,用JS控制图片的切换。
.clsCheckBox{
display:none;
}
改变image的src,$("#check_box_focused").val()为图片的路径。
function changeImg(){ var options = document.getElementsByName("feedbacks"); for (var i=0; i < options.length; i++) { if(options[i].checked) { document.getElementById("image"+i).src = $("#check_box_focused").val(); }else{ document.getElementById("image"+i).src = $("#check_box_unfocused").val(); }; }; }