案例三：全选
2019-04-10 本文已影响0人
十六只猴子王
- 创建一个页面：四个复选框表示爱好，一个复选框全选和全不选，三个按钮，分别有事件：全选，全不选，反选
- function：
- 获取操作的复选框
2.返回的是数组，遍历数组
3.得到每一个复选框
4.设置复选框的属性checked=false/true
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="checkbox" id="boxid" onclick="selAllNo();"/>全选/全不选
<br/>
<input type="checkbox" name="love"/>篮球🏀<br/>
<input type="checkbox" name="love"/>排球🏐️<br/>
<input type="checkbox" name="love"/>羽毛球🏸️<br/>
<input type="checkbox" name="love"/>乒乓球🏓️<br/>
<input type="button" value="全选" onclick="selAll();"/>
<input type="button" value="全不选" onclick="selNo();"/>
<input type="button" value="反选" onclick="selOther();"/>
<script type="text/javascript">
function selAll() {
var loves = document.getElementsByName("love");
for (var i = 0; i < loves.length; i++) {
var love1 = loves[I];
love1.checked = true;
}
}
function selNo() {
var loves = document.getElementsByName("love");
for (var i = 0; i < loves.length; i++) {
var love1 = loves[I];
love1.checked = false;
}
}
function selOther() {
var loves = document.getElementsByName("love");
for (var i = 0; i < loves.length; i++) {
var love1 = loves[I];
if (love1.checked == true) love1.checked = false;
else if (love1.checked == false) love1.checked = true;
}
}
function selAllNo() {
var box1 = document.getElementById("boxid");
if(box1.checked == true){
selAll();
}
else{
selNo();
}
}
</script>
</body>
</html>
image.png
