principle
Using the label tag, wrap input, click label is equivalent to clicking input, and then select the display background images and unchecked
effect
image
A check
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{
padding:0;
margin:0;
}
input[type='checkbox']{
display: none;
}
label{
display: inline-block;
}
label input[type='checkbox']+span{
width: 32px;
height: 32px;
display: inline-block;
background: url(images/checkbox.png)no-repeat 0 0 /32px 32px;
}
label input[type='checkbox']:checked+span{
background: url(images/checkbox_checked.png)no-repeat 0 0 /32px 32px;
}
</style>
</head>
<body>
<label><input type="checkbox"/><span></span>我</label>
<label><input type="checkbox" checked/><span></span>你</label>
<label><input type="checkbox" checked/><span></span>他</label>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>
$(function(){
$("input[type='checkbox']").change(function(){
console.log($("input[type='checkbox']:checked").length);
})
})
</script>
</body>
</html>Radio
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{
padding:0;
margin:0;
}
input[type='radio']{
display: none;
}
label{
display: inline-block;
}
label input[type='radio']+span{
display: inline-block;
width: 32px;
height: 32px;
background: url(images/radio.png)no-repeat 0 0 /32px 32px;
}
label input[type='radio']:checked+span{
display: inline-block;
width: 32px;
height: 32px;
background: url(images/radio_checked.png)no-repeat 0 0 /32px 32px;
}
</style>
</head>
<body>
<label><input type="radio" name="sex"/><span></span>男</label>
<label><input checked type="radio" name="sex"/><span></span>女</label>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>
$(function(){
// console.log($("input[type='radio']:checked").length);
$("input[type='radio']").change(function(){
console.log($("input[type='radio']:checked").length);
})
})
</script>
</body>
</html>