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

用jquery实现的对checkbox和radio控件的美化,非常不错,大家可以通过修改图片来实现更漂亮的效果。

效果图:

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

 
HTML:

复制代码 代码如下:


<div>
<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>
<input type="radio" value='11' /><label>AAAAAA</label>
<input type="radio" value='21' /><label>BBBBBBBB</label>
<input type="radio" value='31' /><label>CCCCCC</label>
<input 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
如果在此基础上您做出了更美的请通知我哦~~
演示地址
打包下载地址

您可能感兴趣的文章:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wdxygx.html