版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/Julylyna/article/details/81665270
<div class="checkbox">
<input type="checkbox">
<label for="">全选</label>
</div>
<div class="radio">
<div class="female">
<input type="radio" id="female" name="sex" value="1" />
<label for="female">女</label>
</div>
<div class="male">
<input type="radio" id="male" name="sex" value="2" />
<label for="male">男</label>
</div>
</div>
input[type="checkbox"],
input[type="radio"] {
width: 20px;
height: 20px;
background-color:#fff;
-webkit-appearance:none;
border:1px solid #c9c9c9;
border-radius: 2px;
outline: none;
}
input[type="radio"] {border-radius: 50%;}
input[type="checkbox"]:checked,
input[type="radio"]:checked {
background-color: #ff7800;
border-color: #ff7800;
background-clip: content-box;
padding:2px;
}
$("input[type='checkbox']").click(function(){
var check = $(this).attr("checked");
if(check){
$(this).removeAttr("checked");
}else{
$(this).attr("checked","checked");
}
})
效果如下: