效果图如上，这里主要是css对勾选时做样式上的处理，在html的<head>标签我们引入jquery和勾选框样式
<title>基本信息</title><script type="text/javascript" src="jq/jquery.min.js"></script><style>.span-style{margin-left:20px;border:none;}label{position: absolute;display: inline-block;border: 1px solid #2c2c2c;width:13px;height:13px;border-radius: 3px;}label input[type="radio"] {appearance: none;-webkit-appearance: none;outline: none;margin: 0;}label input[type="radio"]:after {display: inline-block;position: absolute;content:"";background-color: transparent;}label input[type="radio"]:checked:after {//content:"\2714";//text-align: center;font-weight:boldfont-size:13px;font-family:Sans-serif;background: transparent;top: -3px;left: 3px;content:"L";transform:matrix(-0.766044,-0.642788,-0.642788,0.766044,0,0);-webkit-transform:matrix(-0.766044,-0.642788,-0.642788,0.766044,0,0);}</style>
在html<body>里面放入自定义的勾选框还有对这些勾选的监听或者改变
div style ="margin-top: 100px;margin-left: 100px;"><div>单选</div><label><input type="radio" name = "test" class = "test" id = "test-s1" value = "s1"></input> </label><span class = "span-style">testS1</span><label><input type="radio" name = "test" class = "test" id = "test-s2" value = "s2"></input> </label><span class = "span-style">testS2</span><label><input type="radio" name = "test" class = "test" id = "test-s3" value = "s3"></input> </label><span class = "span-style">testS3</span></div><div style ="margin-top: 100px;margin-left: 100px;"><div>复选</div><label><input type="radio" name = "testF1" class = "testF" id = "testf-s1" value = "0"></input> </label><span class = "span-style">testFS1</span><label><input type="radio" name = "testF2" class = "testF" id = "testf-s2" value = "0"></input> </label><span class = "span-style">testFS2</span><label><input type="radio" name = "testF3" class = "testF" id = "testf-s3" value = "0"></input> </label><span class = "span-style">testFS3</span></div><script type="text/javascript">$(document).ready(function(){console.log("ready");$(".testF").click(function(){//console.log($(this));if($(this)[0].value == "1"){//如果点击的对象原来是选中的，取消选中$(this).removeAttr("checked");$(this).val("0");}else{$(this).val("1");}});$(".test").each(function(){$(this).click(function(){console.log("value = "+$(this).val());});});});</script>
这里简单点，复选用value改变来记录选中与否，只需要通过唯一的class来获取值为1的所有框就能拿到勾选项了。
================================
记一下打印换页代码：
@media print
{
.pageBreak
{
page-break-after: always;
}
.noPrint
{
display: none;
}
}
<div class="pageBreak">
