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);

}