刚刚朋友要个美化的checkbox,要纯javascript的。好久没用过javascript了~~简单的写了几行,看看效果还不错。发上来存着。
/** * 改变图片选中状态。并同时给设置的隐藏表单赋值 * 图片规则。选中图片为on_1.png,非选中图片为off_2.png。其中on_和off_不能变化,可依靠变化数字实现多种样式。 * valueId为需要被赋值的隐藏表单域,值为当前image的value。 */ function changeCheckBox(element,valueId){ var src = element.src; //得到当前选中的状态 var checked = src.substring(src.lastIndexOf('/')+1,src.lastIndexOf('_')); if(checked == "on"){ //变为非选中 element.src=src.replace('/on_','/off_'); document.getElementById(valueId).value = ""; }else{ //变为选中 element.src=src.replace('/off_','/on_'); document.getElementById(valueId).value = element.getAttribute('value'); } }
<img src="images/off_1.png" class="cursor_bnt" οnclick="changeCheckBox(this,'value1')" checked="false" value="值1" />
<input type="hidden" name="value1" id="value1" value="" />
<hr/>
<img src="images/off_2.png" class="cursor_bnt" οnclick="changeCheckBox(this,'value2')" checked="false" value="值2"/>
<input type="hidden" name="value2" id="value2" value="" />
================
============================