用JS怎么实现全选，全不选，还有反选阿（复选框）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p><input type="checkbox" name="" id="all">全选</p>
<input type="checkbox" name="" id="">打篮球
<input type="checkbox" name="" id="">踢足球
<input type="checkbox" name="" id="">上网
<input type="checkbox" name="" id="">听音乐
<p> <button id="but">全选</button>
<button id='but1'>全不选</button>
<button id='but2'>反选</button>
</p>
</body>
</html>
<script>
var mCheck=document.getElementsByTagName('input')
var mBut=document.getElementById("but")
var mBut1=document.getElementById("but1")
var mBut2=document.getElementById("but2")
var rest=true;
mCheck[0].onclick=function(){
if(rest==true){
for(var i=1;i<mCheck.length;i++){
mCheck[i].checked=true;
rest=false;
}
}else if(rest==false){
for(var i=1;i<mCheck.length;i++){
mCheck[i].checked=false;
rest=true
}
}
}
mBut.onclick=function(){
for(var i=1;i<mCheck.length;i++){
mCheck[i].checked=true;
}
}
mBut1.onclick=function(){
for(var i=1;i<mCheck.length;i++){
mCheck[i].checked=false;
}
}
mBut2.onclick=function(){
if(rest==true){
for(var i=1;i<mCheck.length;i++){
mCheck[i].checked=true;
rest=false;
}
}else if(rest==false){
for(var i=1;i<mCheck.length;i++){
mCheck[i].checked=false;
rest=true
}
}
}
</script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>全选</title>
<script type="text/javascript">
window.onload = function() {
var btn = document.getElementById("all");
btn.onclick = function() {
var flag = this.checked;
var items = document.getElementsByName("ckbx");
for (var i = 0; i < items.length; i++) {
items[i].checked = flag;//将所有item的状态设为全选按钮的状态
}
}
var items = document.getElementsByName("ckbx");
for (var i = 0; i < items.length; i++) {
items[i].onclick = function() {//对每个item设置点击
var number = 0;//记录选中的个数
for (var j = 0; j < items.length; j++) {
if (items[j].checked) {
number++;
}
}
document.getElementById("all").checked = (items.length == number);
}
}
}
</script>
</head>
<body>
<br />
<input type="checkbox" id="all" />全选/全不选
<br />
<input type="checkbox" name="ckbx" />读书
<input type="checkbox" name="ckbx" />看报
<input type="checkbox" name="ckbx" />游泳
<input type="checkbox" name="ckbx" />写字
<input type="checkbox" name="ckbx" />上课
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input type="checkbox" id="checkAll">全选</button>
<input type="checkbox" class="check-item" name="zs" />张三
<input type="checkbox" class="check-item" name="ls" />李四
<input type="checkbox" class="check-item" name="ww" />王五
<input type="checkbox" class="check-item" name="zl" />赵六
<script type="text/javascript">
var checkAll = document.getElementById('checkAll')
var checkArr = document.getElementsByClassName('check-item')
// 全选/全不选
checkAll.onclick = function() {
var checked = this.checked
for (var i = 0; i < checkArr.length; i++) {
checkArr[i].checked = checked
}
}
// 单个选择控制全选是否选中
for(var i = 0; i < checkArr.length; i++) {
var num = 0
checkArr[i].onclick = function() {
this.checked ? num++ : num--
checkAll.checked = (num === checkArr.length)
}
}
</script>
</body>
</html>
map()方法配合filter()方法就行了,先filter筛选数据，再用map修改数据的selected属性，这俩方法可以连点
比如：
将选中的改成未选中 data.filter(item => item.selected).map(item => {item.selected = false; return item })
反之：data.filter(item => !item.selected).map(item => {item.selected = true; return item })