利用JS完成全选和全不选

许多后台的系统中，都有批量删除数据的操作。也就涉及到一键全部选中和一键全部取消。
确定事件(鼠标单击事件onclick)，事件绑定到编号前面的复选框里面

获取编号前面的复选框的状态(是否选中)
获取复选框：var checkAllEle = document.getElementById(“id”)
获取复选框的状态：checkAllEle.checked

获取下面所有的复选框：
document.getElementsByName(“name”);
当鼠标勾选第二行的选中框时，下面6个复选框一并被勾选上了。

一键选中.png

当鼠标取消勾选的时候，下面6个复选框也被取消了。

一键取消选中.png

首先要获取总选框的属性（是否处于选中状态）

var a = document.getElementById("checkall");
if(a.checked == true)//判断总选框是否处于选中

html:

<th><input type="checkbox" onclick="checkAll()" id="checkAll"/></th>
//确定事件为点击事件。

根据判断的真假进行执行语句，如果为true（也就是总选框的选项已经勾上）。
获取分选中框中的name属性：

var b = document.ElementsByName("chenkOne");
//document.ElementsByName,获取一类值，所以Element需要加s。

对应html:

<td><input type="checkbox" name="checkOne"/></td>

利用for循环遍历每一个复选框：

for(var i = 0;i<b.length;i++){
  b[i].checked = true;
  }

反之，取消勾选的复选框：

for(var i = 0;i<b.length;i++){
  b[i].checked = false;
  }

最终代码：

<script>
    function checkall(){
        //1.获取编号前面的复选框
        var a = document.getElementById("checkall");
        //2.对编号前面复选框的状态进行判断
        if(a.checked==true){
            //3.获取下面所有的复选框
            var b = document.getElementsByName("checkone");
            //4.对获取的所有复选框进行遍历
            for(var i=0;i<b.length;i++){
                //5.拿到每一个复选框，并将其状态置为选中
                checkOnes[i].checked=true;
            }
        }else{
            //6.获取下面所有的复选框
            var b = document.getElementsByName("checkone");
            //7.对获取的所有复选框进行遍历
            for(var i=0;i<b.length;i++){
                //8.拿到每一个复选框，并将其状态置为未选中
                checkOnes[i].checked=false;
            }
        }
    }
</script>