使用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 相关文章推荐
如何快速的呈现我们的网页的技巧整理
Jul 01 Javascript
Javascript匿名函数的一种应用 代码封装
Jun 27 Javascript
JavaScript下通过的XMLHttpRequest发送请求的代码
Jun 28 Javascript
Jquery Ajax解析XML数据(同步及异步调用)简单实例
Feb 12 Javascript
JavaScript插件化开发教程 (四)
Jan 27 Javascript
JS的数组迭代方法
Feb 05 Javascript
jsonp跨域请求详解
Jul 13 Javascript
Node.js连接Sql Server 2008及数据层封装详解
Aug 27 Javascript
jQuery-ui插件sortable实现自由拖动排序
Dec 01 jQuery
加速vue组件渲染之性能优化
Apr 09 Javascript
基于VUE实现判断设备是PC还是移动端
Jul 03 Javascript
vue-cli3 热更新配置操作
Sep 18 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
桌面中心(三)修改数据库
2006/10/09 PHP
PHP网站提速三大“软”招
2006/10/09 PHP
程序员编程十条戒律
2009/07/09 PHP
PHP简单判断iPhone、iPad、Android及PC设备的方法
2016/10/11 PHP
PHP实现查询手机归属地的方法详解
2017/04/28 PHP
原生javascript实现拖动元素示例代码
2014/09/01 Javascript
node.js使用require()函数加载模块
2014/11/26 Javascript
JavaScript中return false的用法
2015/03/12 Javascript
javascript设置页面背景色及背景图片的方法
2015/12/29 Javascript
javascript实现一个简单的弹出窗
2016/02/22 Javascript
Javascript类型系统之String字符串类型详解
2016/06/21 Javascript
Javascript oop设计模式 面向对象编程简单实例介绍
2016/12/13 Javascript
Node.js编写CLI的实例详解
2017/05/17 Javascript
react+redux的升级版todoList的实现
2017/12/18 Javascript
JS中call和apply函数用法实例分析
2018/06/20 Javascript
[06:50]DSPL次级职业联赛十强晋级之路
2014/11/18 DOTA
python解析文件示例
2014/01/23 Python
python 遍历字符串(含汉字)实例详解
2017/04/04 Python
详解Python在七牛云平台的应用(一)
2017/12/05 Python
Django中日期处理注意事项与自定义时间格式转换详解
2018/08/06 Python
python 对类的成员函数开启线程的方法
2019/01/22 Python
python 实现查询Neo4j多节点的多层关系
2019/12/23 Python
python numpy实现rolling滚动案例
2020/06/08 Python
Python虚拟环境virtualenv创建及使用过程图解
2020/12/08 Python
python matlab库简单用法讲解
2020/12/31 Python
墨西哥巴士车票在线购买:ClickBus
2018/03/27 全球购物
美国婴儿用品及配件购买网站:Munchkin
2019/04/03 全球购物
美国牙科折扣计划:DentalPlans.com
2019/08/26 全球购物
自我评价优秀范文分享
2013/11/30 职场文书
《小动物过冬》教学反思
2014/04/17 职场文书
小学评语大全
2014/04/22 职场文书
品质口号大全
2014/06/17 职场文书
对外汉语专业大学生职业生涯规划范文
2014/09/13 职场文书
2015年植树节活动总结
2015/02/06 职场文书
Python提取PDF指定内容并生成新文件
2021/06/09 Python
MySQL系列之十一 日志记录
2021/07/02 MySQL