html全选替换,网站上如何实现全选与反选

我们经常会看到有些网站中在需要有选项的地方会出现全选，当我们点击全选的时候，所有的都会被选中，下面我们来说一下如何实现这种效果。

先说一下思路：想要利用js写出全选按钮，首先我们要获取全选按钮和其他的选择按钮，然后给全选按钮注册点击事件，当全选按钮被点击的时候，除全选按钮之外的其他的选择框会被选中。

Title

window.οnlοad=function () {

// 1、获取全选按钮

var oBtn=document.getElementById("btn");

// 2、获取box中的所有input

var oBox=document.getElementById("box");

var inputs=oBox.getElementsByTagName("input");

// 3、当点击全选按钮的时候所有的input被选中

// 3、1 给全选按钮添加点击事件

oBtn.οnclick=function () {

// 3、2 遍历box中的所有input

for(var i=0;i

inputs[i].checkd=true;

}

}

}

反选，顾名思义就是当点击此反选按钮的时候之前没有选中的选择框会被选中，之前被选中的选择框会取消选中，下面我们来看一下实现这种需求的代码；

Title

window.οnlοad=function () {

// 1.获取反选按钮

var oBtn=document.getElementById("btn");

// 2.获取box中的所以input

var oBox=document.getElementById("box");

var inputs=oBox.getElementsByTagName("input");

// 3.给反选按钮添加点击事件

oBtn.οnclick=function () {

oBtn.checked=true;

for(var i=0;i

// 3.1 遍历判断有哪些input的checked的值为false；

if(inputs[i].checked==false){

// 3.2 给筛选出来的input的checked的值为true；

inputs[i].checked=true;

}else {

// 3.3 给其他的赋值为false；

inputs[i].checked=false;

}

}

}

}