用图片替换checkbox的样式

 

用label for将文本、图片与checkbox关联起来，点击文本或图片都能实现checkbox的选中与不选中。

 

<%
	for (int i = 0; i < options.length; i++) {
%>
<div class="clsFeedbackBg" onclick="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();
   		};
   	};
}