使用jquery 美化 checkbox 和 radio 控件

时间：2010-11-10 来源：疯狂秀才

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

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