JS实现全选和反选功能

网页中使用到表单复选框时，如果有大量的数据需要选择，经常会用到全选或者反选功能，也可能会用到全不选功能，其实是全选的反选，下面使用原生的js来实现一下全选和反选功能。

HTML页面

使用input标签的type属性为checkbox来创建多个复选框，input标签的type属性为button创建全选和反选按钮。HTML实现代码如下：

 
 
 
 


 

 
选择你喜欢的水果：
 apple

 banana

 pear

 orange

 strawberry

   
 

大概就是这么一个页面，没有CSS，元素比较单调，主要是要实现这么一个功能。

1648219738890.png

全选和反选

需要实现全选和反选，首先需要获取到表单元素，将所有复选框表单元素放到一个数组。因为id属性值是唯一的，所以通过name属性或者class属性获取元素比较合适。 得到数组后遍历，将所有checked值设置为true即可实现全选，全不选原理相同 。反选遍历的时候判断如果checked值为true则改为false，checked值为false则改为true 。

全选函数：

function setAll() {
      var fruit = document.getElementsByName("fruit");
      for (var i = 0; i < fruit.length; i++) {
        fruit[i].checked = true;
      }
    }

反选函数：

function setOthers() {
    var fruit = document.getElementsByName("fruit");
    for (var i = 0; i < fruit.length; i++) {
      if (fruit[i].checked == false)
        fruit[i].checked = true;
      else
        fruit[i].checked = false;
    }
  }

如何使用

使用方法也是特别简单，将上面的函数添加到按钮的点击事件中即可，下面是整个示例代码

  
  
  
  


  

    
选择你喜欢的水果：
    apple

    banana

    pear

    orange

    strawberry