使用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 相关文章推荐
jQuery 获取对象 基本选择与层级
May 31 Javascript
js实现文本框输入文字个数限制代码
Dec 25 Javascript
Javascript的表单验证-揭开正则表达式的面纱
Mar 18 Javascript
Angular-Touch库用法示例
Dec 22 Javascript
jQuery创建及操作xml格式数据示例
May 26 jQuery
D3.js实现拓扑图的示例代码
Jun 30 Javascript
小程序scroll-view组件实现滚动的示例代码
Sep 20 Javascript
JavaScript模板引擎实现原理实例详解
Dec 14 Javascript
微信小程序自定义单项选择器样式
Jul 25 Javascript
微信小程序 如何获取网络状态
Jul 26 Javascript
JavaScript数组及常见操作方法小结
Nov 13 Javascript
jquery实现点击左右按钮切换图片
Jan 27 jQuery
关于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
PHPMYADMIN导入数据最大为2M的解决方法
2012/04/23 PHP
Laravel框架中VerifyCsrfToken报错问题的解决
2017/08/30 PHP
PHP PDOStatement::bindParam讲解
2019/01/30 PHP
alixixi runcode.asp的代码不错的应用
2007/08/08 Javascript
JavaScript 加号(+)运算符号
2009/12/06 Javascript
JavaScript自定义日期格式化函数详细解析
2014/01/14 Javascript
javascript教程:关于if简写语句优化的方法
2014/05/17 Javascript
JavaScript 性能优化小结
2015/10/12 Javascript
js调用屏幕宽度的简单方法
2016/11/14 Javascript
bootstrap使用validate实现简单校验功能
2016/12/02 Javascript
AngularJS 霸道的过滤器小结
2017/04/26 Javascript
js实现json数组分组合并操作示例
2019/02/12 Javascript
如何修改Vue打包后文件的接口地址配置的方法
2020/04/22 Javascript
JS组件库AlloyTouch实现图片轮播过程解析
2020/05/29 Javascript
[03:40]2014DOTA2国际邀请赛 B神专访:躲箭真的很难
2014/07/13 DOTA
采用python实现简单QQ单用户机器人的方法
2014/07/03 Python
解决Python中由于logging模块误用导致的内存泄露
2015/04/23 Python
Python的Django框架中forms表单类的使用方法详解
2016/06/21 Python
高效测试用例组织算法pairwise之Python实现方法
2017/07/19 Python
python Socket之客户端和服务端握手详解
2017/09/18 Python
python如何通过实例方法名字调用方法
2018/03/21 Python
Python实现的多项式拟合功能示例【基于matplotlib】
2018/05/15 Python
Python获取时间范围内日期列表和周列表的函数
2019/08/05 Python
Django项目主urls导入应用中views的红线问题解决
2019/08/10 Python
Python sorted排序方法如何实现
2020/03/31 Python
pycharm全局搜索的具体步骤
2020/07/28 Python
Python中实现一行拆多行和多行并一行的示例代码
2020/09/06 Python
Pytorch实验常用代码段汇总
2020/11/19 Python
python中if嵌套命令实例讲解
2021/02/25 Python
积极分子思想汇报
2014/01/04 职场文书
九年级物理教学反思
2014/01/29 职场文书
《苏珊的帽子》教学反思
2014/04/07 职场文书
小学生保护环境倡议书
2014/05/15 职场文书
乡镇八一建军节活动方案
2014/08/24 职场文书
Mysql数据库命令大全
2021/05/26 MySQL
JUnit5常用注解的使用
2021/07/02 Java/Android