【HTML+CSS+JS】前台简单功能之====复选框（全选/全不选/反选）
程序员文章站
2022-05-31 12:01:56
...
【HTML+CSS+JS】前台简单功能之====复选框（全选/全不选/反选）
界面效果如下：
代码如下：
checkBox.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>复选框操作</title>
<script type="text/javascript" src="../js/checkBox.js"></script>
</head>
<body>
<input type="checkbox" id="boxid" onclick="selectAllOrNo();">全选/全不选
</br></br>
<input type="checkbox" name="a" />华为</br>
<input type="checkbox" name="a" />小米</br>
<input type="checkbox" name="a" />三星</br>
<input type="checkbox" name="a" />苹果</br>
<input type="checkbox" name="a" />荣耀</br>
<input type="checkbox" name="a" />联想</br>
<input type="checkbox" name="a" />戴尔</br>
<input type="checkbox" name="a" />酷派</br>
</br>
</br>
<input type="button" value="全选" onclick="selectAll();"/>
<input type="button" value="全不选" onclick="selectNo();"/>
<input type="button" value="反选" onclick="selectOthers();"/>
</body>
</html>
checkBox.js
//全选
function selectAll(){
var tag = document.getElementsByName("a");
for(var i = 0;i < tag.length;i++){
var ai = tag[i];
ai.checked = true;
}
}
//全不选
function selectNo(){
var tag = document.getElementsByName("a");
for(var i = 0;i < tag.length;i++){
var ai = tag[i];
ai.checked = false;
}
}
//反选
function selectOthers(){
var tag = document.getElementsByName("a");
for(var i = 0;i < tag.length;i++){
var ai = tag[i];
if(ai.checked == true){
ai.checked = false;
}else{
ai.checked = true
}
}
}
//全选/全不选
function selectAllOrNo(){
var sel = document.getElementById("boxid");
if(sel.checked == false){
selectNo();
}else{
selectAll();
}
}