首页 / 脚本样式 / JavaScript / 使用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.jb51.net/js/jQuery_HCheckbox/index.html
打包下载地址