效果图: 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打包下载地址

　　推荐阅读

　　javascript 学习笔记(onchange等)

1.onchange 及其onpropertychange,oninput 在IE下可使用onpropertychangel立即触发监听， oninput 可以使用在FF下，但必须使用w3c推荐的addEventListener的方式来绑定事件. http://www.jb51.net/article/25275.htm>>>详细阅读

本文标题：使用jquery与图片美化checkbox和radio控件的代码(打包下载)

地址：http://www.17bianji.com/kaifa2/JS/25419.html

 1/2    1