使用jquery 美化 checkbox 和 radio 控件

有图才有说明力，如果看到图以后不是您所需要的，建议直接X掉。以免浪费您宝贵的时间

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

如果在此基础上您做出了更美的请通知我哦~~