IE8 浏览器复选框勾选无效怎么解决，搞半天 ,请教一下大佬

楠楠不是兰兰 2018-10-09 04:10:18

IE8 浏览器复选框勾选无效怎么解决，搞半天
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/* ---初始化--- */
* {
margin: 0;
padding: 0;
}
.checkbox{
float: left;
margin: 20px 5px;
}
.all{

}
.checkbox input{
outline: none;
}
.checkbox label{
display: inline-block;
width: 20px;
height: 20px;
line-height: 20px;
text-align: center;
border: 2px solid #3b8be6;
position: relative;
border-radius: 3px;
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;

}
input{
width: 45px;
height: 45px;
}

input:checked+label{/*当复选框选的的时候改变边框色*/
background: #3b8be6;
}

input+label:after{
content: '√';
color: #fff;
}
input:checked+label:after{
content: '√';
color: #fff;
}

input{
width: 0;
}
</style>
</head>
<body>
<i class=""></i>
<div class='test-box'>
<div class="checkbox btn">
<input type="checkbox" checked="checked" id="check1" value="0">
<label for="check1"></label>
</div>
<div class="checkbox btn">
<input type="checkbox" id="check2" value="1">
<label for="check2"></label>
</div>
<div class="checkbox btn">
<input type="checkbox" id="check3" value="2">
<label for="check3"></label>
</div>
<div class="checkbox btn">
<input type="checkbox" id="check4" value="3">
<label for="check4"></label>
</div>
<div class="all checkbox">
<input type="checkbox" id="all">
<label for="all"></label>
<span>全选</span>
</div>
<div class="sub ">
<input type="button" id="sub" value="提交">
</div>
</div>
<script src="jquery.min-1.7.2.js"></script>
<script>
$(function(){
var data=[
{name:"111",value:"一行白鹭上青天"},
{name:"222",value:"二行白鹭上青天"},
{name:"333",value:"三行白鹭上青天"},
{name:"444",value:"四行白鹭上青天"},
]

$('#all').click(function () {
$('.btn input').prop('checked',$(this).prop('checked'))
})
$('#sub').click(function () {
var res = []
$('.btn input').each(function () {
if($(this).prop('checked')){
res.push(data[$(this).val()])
}
})
console.log(res)
})
$('.btn').click(function () {
var flg=true;
$('.btn input').each(function () {
if(!$(this).prop('checked')) {
flg = false
}
})
if(!flg){
$('#all').prop('checked',false)
}else{
$('#all').prop('checked',true)
}

})

})

</script>
</body>
</html>

...全文