JavaScript如何实现“全选”和”全不选”功能？

原创红太狼 2020-06-22 14:12 1664阅读 0赞

# JavaScript如何实现“全选”和"全不选"功能？

> 全选和全部选在我们的业务中是最常用的方法，譬如layui等等相关都是在框架中封装了。只需要调用他们的方法即可，本篇文章带你使用原生js实现全选，全部选。

实现思路：

1. 全选全不选，根据一个全选按钮判断这个按钮是选中状态还是为选中状态。
  		2. 根据全选按钮的状态设置，其它全选。

**代码如下**

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<script>
 
  function clickon() {
    // 获取到body中所有checkbox
    var checkbox = document.querySelectorAll("input[type='checkbox']");
 
    for (var i = 0; i < checkbox.length; i++) {
      checkbox[i].checked = true;
    }
  }
 
  function unclick() {
    var checkbox = document.querySelectorAll("input[type='checkbox']");
 
    for (var i = 0; i < checkbox.length; i++) {
      checkbox[i].checked = false;
    }
  }
 
</script>
<body>
 
<form>
  <input type="checkbox">吃
  <input type="checkbox">喝
  <input type="checkbox">拉
  <input type="checkbox">撒
  <input type="button" value="全选" onclick="clickon()">
  <input type="button" value="全不选" onclick="unclick()">
</form>
 
</body>
</html>
```

效果

![img](https://img.php.cn/upload/article/000/000/024/e8659f53d4173c43dd6806ab9d363e0b-0.gif)

文章版权声明：注明蒲公英云原创文章，转载或复制请以超链接形式并注明出处。

发表评论取消回复

表情：

评论列表（有 0 条评论，1664人围观）

还没有评论，来说两句吧...

相关阅读

相关利用JavaScript和jQuery实现全选全不选和反选功能

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

客官°小女子只卖身不卖艺/ 2023年06月16日 04:56/ 0 赞/ 37 阅读

相关全选，全不选功能

需求： 1.点击全选，子项全部选中，再次点击，则全部不选中。 2.选中全部子项，全选选中，没有选中则不选中全选按钮。前端部分：调

末蓝、/ 2022年11月17日 05:09/ 0 赞/ 270 阅读

相关 jQurey全选，反选，不全选功能实现

html部分 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>全选，反选，不全选</t

╰+哭是因爲堅強的太久メ/ 2022年08月21日 10:53/ 0 赞/ 271 阅读

相关 JQuery实现全选、全不选和反选功能

项目中需要做一个全选、全不选和反选的功能。刚接到这个需求的时候，心想很简单的一个功能，几行代码就能搞定，然而事实并非如此。下面就把我的思路说一下：

旧城等待，/ 2022年07月14日 14:09/ 0 赞/ 343 阅读

相关 Jquery 实现全选全不选功能

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>attr</title>

ゞ浴缸里的玫瑰/ 2022年06月05日 00:16/ 0 赞/ 308 阅读

相关 javascript实现全选，反选功能

今天看项目发现有全选和反选的按钮实现，比较感兴趣，从网上搜索了自己实现了一下实现的方式就是在我们的按钮中设置响应的事件，然后在我们的函数中，通过定义的多选按钮的na

淡淡的烟草味﹌/ 2022年05月17日 10:48/ 0 赞/ 263 阅读

相关 JavaScript实现全选、反选、不选功能

实现代码： <!DOCTYPE html> <html> <meta charset='utf-8' /> <body> <input

叁歲伎倆/ 2022年02月15日 08:06/ 0 赞/ 330 阅读

相关 jQuery中实现全选，全不选功能

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></t

蔚落/ 2021年09月18日 23:04/ 0 赞/ 421 阅读

相关 vue实现全选、全不选和部分选择功能

在开发项目的过程当中，特别是开发后台管理系统时，会有很多的数据等待管理员去统一管理，所以有时候还需要将一些数据导出，然后打印，这是很有必要的，因为数据可以帮助分析这个产品是否具

Dear 丶/ 2021年06月11日 15:12/ 0 赞/ 507 阅读

相关 JavaScript如何实现“全选”和”全不选”功能？

JavaScript如何实现“全选”和”全不选”功能？全选和全部选在我们的业务中是最常用的方法，譬如layui等等相关都是在框架中封装了。只需要调用他们的方法即可，本...

红太狼/ 2020年06月22日 14:12/ 0 赞/ 1665 阅读