页面的head部分，需引入jQuery库、JS插件、样式文件，并对指定元素启用插件，代码如下：

<script src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-hcheckbox.js"></script>
<link type="text/css" rel="stylesheet" href='css/css.css' />
<script type="text/javascript">
$(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());
	})
});
</script>

页面的body部分，在两个div里分别放入复选框和单选按钮的对应内容，代码如下：

<div id="chklist" style="padding:10px; font-size:14px; ">
  <input type="checkbox" value='1' />
  <label>健康</label>
  <input type="checkbox" value='2' />
  <label>快乐</label>
  <input type="checkbox" value='3' />
  <label>财富</label>
  <input type="checkbox" value='4' />
  <label>自由</label>
</div>
<div id="radiolist" style="padding:10px; font-size:14px; ">
  <input name='r' type="radio" value='11' />
  <label>健康</label>
  <input name='r' type="radio" value='21' />
  <label>快乐</label>
  <input name='r' type="radio" value='31' />
  <label>财富</label>
  <input name='r' type="radio" value='41' />
  <label>自由</label>
</div>
<input type="button" value="确定" id="btnOK" />