label+input 选择（优化多选按钮）及 input实现全选反选
1、多选， 选择之后不同的背景， input中 id和label中 for对应的值必须相同
'<label class="inputLable" for=' + item.orderId + '><input type="checkbox" id=' + item.orderId + ' value=' + item.orderId + ' "/></label>' ;
input[type="checkbox"] {
appearance: none;
-webkit-appearance: none;
outline: none;
display: none
}
.inputLable input[type="checkbox"] {
width: 20px;
height: 20px;
display: inline-block;
background: url(../../imges/moreDelivery/noSelect@2x.png) no-repeat;
background-size: 100%;
}
.inputLable input[type="checkbox"]:checked {
width: 20px;
height: 20px;
display: inline-block;
background: url(../../imges/moreDelivery/select@2x.png) no-repeat;
background-size: 100%;
}
2、设置label背后的选中阴影
label {
outline: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
3、实现全选和反选（一个按钮）
var ch = document.getElementById("box");
if (document.getElementsByName("allChecked")[0].checked == true) {
$(':checkbox').prop('checked', true);
} else {
$(':checkbox').prop('checked', false);
}