刚刚朋友要个美化的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="" />
================
============================
- 大小: 2.8 KB
- 大小: 2.1 KB
分享到:
相关推荐
CSS3美化Checkbox复选框代码.zip
通过使用css+html+JavaScript实现CheckBox多选,单选的功能美化,代码简单易懂,运行即可
界面美化Javascript类库是一个超棒的页面checkbox和radio美化jQuery类库。 界面美化Javascript类库演示图:
本文实例介绍了javascript实现checkbox复选框实例代码以及对checkbox复选框进行美化操作,分享给大家供大家参考,具体内容如下 1、checkbox复选框进行美化操作 复选框默认外表的美观度差强人意,能够满足美观度要求...
美化版checkbox,radio等
主要特色: 完全响应式; 完美键盘操作支持; 可定制的输入标签:select, radio, checkbox 以及 file; 自定义的日期选择器 本地化支持 表单验证的代码示例:
摘要:脚本资源,Ajax/JavaScript,jQuery,CheckBox jq插件,用来美化CheckBox的,也就是把网页上原有的CheckBox样式换成自定义样式,至于什么样式这个要根据你自己的喜好或网页风格来定,本示例运行效果如上所示。
表单Checkbox元素美化特效.zip
这里用JavaScript实现checkbox复选框选中效果,表单中的复选框效果,打对勾选中效果模拟,JS与HTML5相结合实现的美化效果。貌似目前比较流行的效果啦! 运行效果截图如下: 在线演示地址如下: ...
checkbox单选复选按钮美化代码.zip
css3制作checkbox单选按钮美化代码.zip
界面美化Javascript类库是一个超棒的页面checkbox和radio美化jQuery类库。 界面美化Javascript类库演示图:
Pretty Checkbox 是一个纯 CSS 库用来美化复选框和单选按钮
Simple-bt-checks是一款基于Bootstrap3的Checkbox元素美化jQuery插件。通过该插件可以轻松的制作各种尺寸、颜色的复选框按钮,并且可以自定义复选框选中时的图标,以及完全自定义复选框的样式。
form_checkbox 移动端表单checkbox多选框美化
摘要:脚本资源,Ajax/JavaScript,复选框美化 JS实现单个图片美化选中框,选择框,也就是大家熟悉的checkbox功能,大家看下演示效果,比传统的复选框要漂亮多了,鼠标点击图片即可出现美化后的选择框,一个红色的对勾...
javascript checkbox,radio美好效果代码,非常漂亮
awesome-bootstrap-checkbox是一款可以美化Bootstrap复选框和单选按钮的插件。它使用纯CSS编写,没有任何的javascript文件。它通过在原生Bootstrap组件的基础上做一些小改动,即可完成漂亮的美化效果。