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

230 阅读 0 评论 152 点赞

我是靠谱客的博主个性母鸡，最近开发中收集的这篇文章主要介绍使用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.uoften.com/js/jQuery_HCheckbox/index.html
打包下载地址