用图片轮换checkbox的样式

用图片替换checkbox的样式

?

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

?

<%for (int i = 0; i < options.length; i++) {%><div onclick="changeImg()"><table>    <tr>    <td width="90%" style="padding-left: 3%">    <label id="<%="op" + i%>" for="<%="option" + i%>"><%= options[i]%></label>    </td>    <td width="10%" ><input 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();   };   };}   ?