javascript美化checkbox-CSDN博客

本文介绍了一个使用纯JavaScript实现的美化Checkbox的方法。通过更改图片来模拟Checkbox的状态，并同步更新隐藏表单域的值。该方法不依赖任何外部库，适用于希望减少页面加载资源的项目。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

刚刚朋友要个美化的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" onclick="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" onclick="changeCheckBox(this,'value2')" checked="false" value="值2"/>
<input type="hidden" name="value2" id="value2" value="" />

================