效果图:

HTML:

复制代码 代码如下:

<div id="chklist">

<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">

<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

打包下载地址