实现全选、全不选、反选并输出所选的功能(Html+CSS+Js)
1、效果展示
2、直接上代码
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>观 微</title>
<script>
window.onload = function () {
// 获取所有的按钮
var btns = document.getElementsByTagName("button");
// 获取所有的选项input
var inputs = document.getElementsByTagName("input");
// 全选或者不选的时候 调用此函数
function fun(flag) {
for (var i = 0; i < inputs.length; i++) {
inputs[i].checked = flag;
}
}
//全选
btns[0].onclick = function () {
fun(true);
}
//不选
btns[1].onclick = function () {
fun(false);
}
//反选
btns[2].onclick = function () {
// 遍历所有的选项,判断每一个选项是否被选中
for (var i = 0; i < inputs.length; i++) {
inputs[i].checked = !inputs[i].checked;
}
}
//确定
btns[3].onclick = function () {
var msg = "";
var results = document.getElementsByTagName("input");
for (let i = 0; i < inputs.length; i++) {
if (inputs[i].checked) {
msg += inputs[i].value;
}
}
var console = document.getElementById("result");
for (var i = 0; i < console.childNodes.length; i++) {
var node = console.childNodes[i];
node.parentNode.removeChild(node);
}
var p = document.createElement("p");
p.innerHTML = msg;
console.append(p);
}
}
</script>
</head>
<body>
<div id="box1">
<a>请选择:</a>
<br>
<input type="checkbox" value="A">A选项</input>
<input type="checkbox" value="B">B选项</input>
<input type="checkbox" value="C">C选项</input>
<input type="checkbox" value="D">D选项</input>
</div>
<div id="box2">
<button>全选</button>
<button>全不选</button>
<button>反选</button>
<button>确定</button>
<br>
<a>您的选项是:</a>
</div>
<div id="result"></div>
</body>
</html>