复选框全选

复选框

<p class="copy_td"><input type="checkbox" class="input_check" id="checkbox11"><label for="checkbox11"></label></p>

p {position: relative;}

p .input_check {position: absolute;visibility: hidden; }

p .input_check+label {display: inline-block;position: absolute;top: -10px;background: url(../images/checkboxno.png) left center no-repeat;width:80px; height: 16px; background-size: 16px; visibility: visible;}
p .input_check:checked+label:after {content: "";position: absolute;left: 0px;background: url(../images/checkboxyes.png) left center no-repeat;width:80px; height: 16px;line-height: 16px; background-size: 16px;}

var th =$(".copy_th input.input_check");

var td =$(".copy_td input.input_check");
th.click(function(){
if (th.is(":checked") == false) {
td.prop("checked",false);
} else {
td.prop("checked",true);
}
})
td.click(function(){
var tdlength=$(".copy_td input.input_check[type='checkbox']").length;
var tdchecked=$(".copy_td input.input_check[type='checkbox']:checked").length;
if (tdchecked == tdlength) {
th.prop("checked",true);
} else {
th.prop("checked",false);
}
})

 

单选框样式

<i><input type="radio" class="input_radio" name="crowd_fund_radio" id="radio1" value="1" checked=""><label for="radio1">单选框</label></i>

.input_radio {position: absolute;width: 20px;height: 20px;visibility: hidden;}
.input_radio+label {display: inline-block;width: 120px;height: 20px;text-indent:18px;line-height:18px;color: #666666;background: url(../images/radio_no.png) left center no-repeat; float: left; margin:5px 10px 0px 10px;}
.input_radio:checked+label {background: url(../images/radio_yes.png) left center no-repeat;}