效果圖如上，這裏主要是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:bold
font-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的所有框就能拿到勾選項了。