使用原生js实现按钮的全选功能，简单清晰

1.相信有很多朋友在学习前端原生JS的时候，都有遇到过实现全选按钮的需求吧。废话不多说直接上代码吧！

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div>全选<input type="checkbox" class="main"><br>1<input type="checkbox" name="1" id="a" >2<input type="checkbox" name="2" id="a">3<input type="checkbox" name="3" id="a">4<input type="checkbox" name="4" id="a"></div><script>// 获取dom元素let dom = document.querySelector(".main")let inputs =document.querySelectorAll("#a")//给所有小按钮循环绑定点击事件for (let i = 0; i < inputs.length; i++) {inputs[i].onclick = function () {if(checks(Array.from(inputs))){dom.checked = true}else{dom.checked = false}}}// 给全选按钮绑定点击事件dom.onclick = function(){dom.checked ? addCheck(true):addCheck(false)}//小按钮控制全选按钮function checks(arr) {let isChecked = arr.every((item)=>{return  item.checked == true})return isChecked}//全选控制其他的小按钮function addCheck(params) {Array.from(inputs).forEach(item => {item.checked = params});}</script>
</body>
</html>

2.其实实现这个功能不难，我们需要有的是实现这个功能时候的编码思想。

使用原生js实现按钮的全选功能，简单清晰相关推荐

JS全选功能代码优化
JS全选功能代码优化原文:JS全选功能代码优化 JS全选功能代码优化最近在看javascript MVC那本书,也感觉到自己写的代码也并不优雅,所以一直在想用另一种模式来编写JS代码,所以针对之 ...
点击button按钮实现全选_全选按钮的实现及事件的处理
这种全选的效果在后台是很需要的,因为有时候数据很多,如果想删除全部的数据,没有全选按钮岂不是很麻烦,所以很有必要实现这种全选的效果,并执行相关的事件,下面就来看看如何实现先来看看第一种方法: 首先先 ...
html 怎么整体全选功能,html复选框全选按钮
如何用html做复选框全选中和全不选中 html中实现单击单击一个按钮实现全部选中,在点击一 function selectAllDels() { var allCheckBoxs = documen ...
用js创建表格及全选反选
用js创建表格及全选反选用js代码来实现创建表格,及全选反选,代码效果图如下: <!DOCTYPE html> <html lang="en"><h ...
暑期学习日记34：js全选功能
今天学习了使用js实现全选功能,点击全选的复选框后会将下面所有的复选框变为被选择状态. 代码如下: <!doctype html> <html> <head> &l ...
【javascript】js实现表格全选功能
效果: 一个表格实现单选功能和全选功能. <!DOCTYPE html> <html lang="en"> <head><meta ch ...
layui table 全选过滤_layui表格(表单)的全选功能
最近在使用layui这个框架,其中有用到表格的全选功能,下面记录下我的使用.html文件需要引用的是layui.js和layui.css,但是上面两个文件又会引入其他文件.,如图所示, 所以建议从la ...
layui表格监听全选_layui表格(表单)的全选功能
最近在使用layui这个框架,其中有用到表格的全选功能,下面记录下我的使用.html文件需要引用的是layui.js和layui.css,但是上面两个文件又会引入其他文件.,如图所示, 所以建议从la ...
java记事本复制粘贴_Java Swing 如何实现记事本中“编辑”菜单下的剪切，复制，粘贴，删除，全选功能...
这篇文字将要学习以下知识点: 1.如何给JButton按钮添加鼠标点击事件监听器 #1.addMouseListener(MouseListener l) 给JButton添加一个鼠标点击监听器l ...

使用原生js实现按钮的全选功能，简单清晰

使用原生js实现按钮的全选功能，简单清晰相关推荐

最新文章

热门文章