<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
你爱好的运动是?
<input type="checkbox" name="checkboxall" id="sele">全选/全不选
<input type="checkbox" name="checkbox">足球
<input type="checkbox" name="checkbox">篮球
<input type="checkbox" name="checkbox">羽毛球
<input type="checkbox" name="checkbox">乒乓球
<button id="selectall">全选</button>
<button id="selectno">全不选</button>
<button id="inverse">反选</button>
<script type="text/javascript">
var sele = document.getElementById("sele");
var selectall = document.getElementById("selectall");
var selectno = document.getElementById("selectno");
var inverse = document.getElementById("inverse");
var len = document.getElementsByName("checkbox");
sele.onclick = function() {
for (var i = 0; i < len.length; i++) {
len[i].checked = this.checked; //就是将选择勾选的复选框的状态赋值给后面的复选框就可以了。
//可以完美的解决ie 7,8下非动态创建的复选框的全选问题
}
}; //复选框全选,全不选
<!-- // for (var i = 0; i < len.length; i++) {
// if (len[i].getAttribute("checked") == null) {
// len[i].setAttribute("checked", true);
// } else {
// len[i].removeAttribute("checked");
// }
// } -->
selectall.onclick = function() {
for (var i = 0; i < len.length; i++) {
len[i].checked = true;
}
};
// 全选
selectno.onclick = function() {
for (var i = 0; i < len.length; i++) {
len[i].checked = false;
};
}
// 全部选
inverse.onclick = function() {
for (var i = 0; i < len.length; i++) {
len[i].checked = !len[i].checked;
//相当于
// if(len[i].checked ){
// len[i].checked=false;
// }else{
// len[i].checked=true;
// }
}
};
// 反选
</script>
</body>
</html>
由于审题不清,当在写其中的复选框全选和全部选的时候,让我纠结了挺久,这段代码是我一开始想的,在chrome和ff完美通过, 在ie9+以上也没问题,关键在于ie7,8
这段代码死活不行,ie7,8不支持setAttribute,然后查了下要用checked;
for (var i = 0; i < len.length; i++) {
if (len[i].getAttribute("checked") == null) {
len[i].setAttribute("checked", true);
} else {
len[i].removeAttribute("checked");
}
}