使用jquery与图片美化checkbox和radio控件的代码(打包下载)


Posted in Javascript onNovember 11, 2010

效果图:
使用jquery与图片美化checkbox和radio控件的代码(打包下载) 
HTML:

<div id="chklist" style="padding:10px; font-size:14px; "> 
<input type="checkbox" value='1' /><label>aaaaaa</label> 
<input type="checkbox" value='2' /><label>bbbbbb</label> 
<input type="checkbox" value='3' /><label>ccccc</label> 
<input type="checkbox" value='4' /><label>ddddd</label> 
</div> 
<div id="radiolist" style="padding:10px; font-size:14px; "> 
<input name='r' type="radio" value='11' /><label>AAAAAA</label> 
<input name='r' type="radio" value='21' /><label>BBBBBBBB</label> 
<input name='r' type="radio" value='31' /><label>CCCCCC</label> 
<input name='r' type="radio" value='41' /><label>DDDDDD</label> 
</div>

JS:

$(function(){ 
$('#chklist').hcheckbox(); 
$('#radiolist').hradio(); 
$('#btnOK').click(function(){ 
var checkedValues = new Array(); 
$('#chklist :checkbox').each(function(){ 
if($(this).is(':checked')) 
{ 
checkedValues.push($(this).val()); 
} 
}); 
alert(checkedValues.join(',')); 
alert($('#radiolist :checked').val()); 
}) 
});

引入jquery文件是必须的
还有一个是 checkbox 的插件JS文件 jquery-hcheckbox.js, 在下载的压缩包中有 源文件 和 DEMO
如果在此基础上您做出了更美的请通知我哦~~
演示地址 http://demo.3water.com/js/jQuery_HCheckbox/index.html
打包下载地址
Javascript 相关文章推荐
JS打开层/关闭层/移动层动画效果的实例代码
May 11 Javascript
JS过滤url参数特殊字符的实现方法
Dec 24 Javascript
jQuery中[attribute=value]选择器用法实例
Dec 31 Javascript
JS+CSS实现仿触屏手机拨号盘界面及功能模拟完整实例
May 16 Javascript
初识angular框架后的所思所想
Feb 19 Javascript
JS判断字符串变量是否含有某个字串的实现方法
Jun 03 Javascript
纯JS实现轮播图
Feb 22 Javascript
Vue精简版风格概述
Jan 30 Javascript
jQuery实现的简单获取索引功能示例
Jun 04 jQuery
bootstrap-paginator服务器端分页使用方法详解
Feb 13 Javascript
Node.js API详解之 console模块用法详解
May 12 Javascript
详细分析React 表单与事件
Jul 08 Javascript
关于firefox的ElementTraversal 接口 使用说明
Nov 11 #Javascript
将string解析为json的几种方式小结
Nov 11 #Javascript
js读取本地excel文档数据的代码
Nov 11 #Javascript
JS维吉尼亚密码算法实现代码
Nov 09 #Javascript
网易JS面试题与Javascript词法作用域说明
Nov 09 #Javascript
浅谈Javascript嵌套函数及闭包
Nov 09 #Javascript
JavaScript高级程序设计 扩展--关于动态原型
Nov 09 #Javascript
You might like
浅析application/x-www-form-urlencoded和multipart/form-data的区别
2014/06/22 PHP
Swoole-1.7.22 版本已发布,修复PHP7相关问题
2015/12/31 PHP
PHPMailer ThinkPHP实现自动发送邮件功能
2018/06/10 PHP
function, new function, new Function之间的区别
2007/03/08 Javascript
js电信网通双线自动选择技巧
2008/11/18 Javascript
jquery实现弹出窗口效果的实例代码
2013/11/28 Javascript
node.js中的fs.appendFile方法使用说明
2014/12/17 Javascript
学习JavaScript设计模式之代理模式
2016/01/12 Javascript
整理AngularJS框架使用过程当中的一些性能优化要点
2016/03/05 Javascript
Bootstrap Table的使用总结
2016/10/08 Javascript
微信小程序 WebSocket详解及应用
2017/01/21 Javascript
angular.js 路由及页面传参示例
2017/02/24 Javascript
AngularJs+Bootstrap实现漂亮的计算器
2017/08/10 Javascript
将Sublime Text 3 添加到右键中的简单方法
2017/12/12 Javascript
create-react-app构建项目慢的解决方法
2018/03/14 Javascript
js实现图片粘贴到网页
2019/12/06 Javascript
Postman动态获取返回值过程详解
2020/06/30 Javascript
[43:03]完美世界DOTA2联赛PWL S2 PXG vs Magma 第二场 11.21
2020/11/24 DOTA
Python中使用ConfigParser解析ini配置文件实例
2014/08/30 Python
Python字符编码与函数的基本使用方法
2017/09/30 Python
python3爬取各类天气信息
2018/02/24 Python
Python 实现数据结构-循环队列的操作方法
2019/07/17 Python
matplotlib 对坐标的控制,加图例注释的操作
2020/04/17 Python
法国珠宝店:CLEOR
2017/01/29 全球购物
美国复古街头服饰精品店:Need Supply Co.
2017/02/22 全球购物
物业公司采购员岗位职责
2013/12/31 职场文书
甜美蛋糕店创业计划书
2014/01/30 职场文书
招聘专员岗位职责
2014/03/07 职场文书
行政主管职责范本
2014/03/07 职场文书
社区优秀志愿者先进事迹
2014/05/09 职场文书
2016年幼儿园教研活动总结
2016/04/05 职场文书
MySQL令人大跌眼镜的隐式转换
2021/08/23 MySQL
用 Python 定义 Schema 并生成 Parquet 文件详情
2021/09/25 Python
世界十大动漫制作公司排行榜,迪士尼上榜,第二是美国代表性文化符
2022/03/18 欧美动漫
配置Kubernetes外网访问集群
2022/03/31 Servers
HttpClient实现文件上传功能
2022/08/14 Java/Android