如何实现全选与反选

最新推荐文章于 2024-04-02 19:39:43 发布

youngjqz

最新推荐文章于 2024-04-02 19:39:43 发布

阅读量574

点赞数 2

分类专栏： javascript 前端文章标签： javascript 前端事件 DOM

本文链接：https://blog.csdn.net/youngjqz/article/details/77727425

版权

前端同时被 2 个专栏收录

24 篇文章 1 订阅

订阅专栏

javascript

21 篇文章 0 订阅

订阅专栏

我们经常会看到有些网站中在需要有选项的地方会出现全选，当我们点击全选的时候，所有的都会被选中，下面我们来说一下如何实现这种效果。
先说一下思路：想要利用js写出全选按钮，首先我们要获取全选按钮和其他的选择按钮，然后给全选按钮注册点击事件，当全选按钮被点击的时候，除全选按钮之外的其他的选择框会被选中。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="checkbox" id="btn">
<div id="box">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
</div>
</body>
</html>
<script>
    window.onload=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.onclick=function () {
//            3、2 遍历box中的所有input
            for(var i=0;i<inputs.length;i++){
                inputs[i].checkd=true;
            }
        }
    }
</script>

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="checkbox" id="btn">
<div id="box">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
</div>
</body>
</html>
<script>
    window.onload=function () {
//        1.获取反选按钮
        var oBtn=document.getElementById("btn");
//        2.获取box中的所以input
        var oBox=document.getElementById("box");
        var inputs=oBox.getElementsByTagName("input");
//        3.给反选按钮添加点击事件
        oBtn.onclick=function () {
            oBtn.checked=true;
           for(var i=0;i<inputs.length;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;
               }
           }
        }
    }
</script>