原生JS项目练习——全选与全不选和反选

一、主要功能介绍：

二、JS代码详细步骤解析：

JS代码：

三、全部代码：

感谢：@有鱼是只猫提供的视频

一、主要功能介绍：

1、用原生JS实现全选：用for循环遍历每一个input，让他全部选中

2、用原生JS实现全不选：用for循环遍历每一个input，让他全部选中

3、用原生JS实现反选：用for循环遍历每一个input，让他现在的选中状态的相反值，赋值给他的选中状态（重点）

二、JS代码详细步骤解析：

这不是重点，重点是学习原生JS

JS代码：

主要重点：

1、用原生JS实现全选：用for循环遍历每一个input，让他全部选中

2、用原生JS实现全不选：用for循环遍历每一个input，让他全部选中

3、用原生JS实现反选：用for循环遍历每一个input，让他现在的选中状态的相反值，赋值给他的选中状态（重点）

注释都很详细了，有任何问题欢迎评论指正！

<script>var inputs = document.querySelectorAll("ul li input");var buttons = document.querySelectorAll("button");// 全选buttons[0].onclick = function() {// for循环，将所有的li都选中for (let i = 0; i < inputs.length; i++) {inputs[i].checked = true;}}// 全不选buttons[1].onclick = function() {// for循环，将所有的li都选中for (let i = 0; i < inputs.length; i++) {inputs[i].checked = false;}};// 反选buttons[2].onclick = function() {// for循环，将所有的li都选中for (let i = 0; i < inputs.length; i++) {// 将当前的checked的选中状态的取反，赋值给每个input的checked属性inputs[i].checked = !inputs[i].checked;}};</script>

三、全部代码：

html和css:

<style>.main {margin: 0 auto;width: 300px;height: 400px;font-size: 20px;}input {margin-top: 10px;margin-bottom: 20px;margin-right: 20px;width: 20px;height: 16px;}li {list-style: none;}button {width: 90px;height: 40px;}</style>
</head><body><div class="main"><ul><li><input type="checkbox" name="" id="">尼古拉斯赵四</li><li><input type="checkbox" name="" id="">莱昂奈朵刘能</li><li><input type="checkbox" name="" id="">约翰尼宋小宝</li><li><input type="checkbox" name="" id="">布拉德小沈阳</li></ul><button>全选</button><button>全不选</button><button>反选</button></div>

感谢：@有鱼是只猫提供的视频

原生JS项目练习——全选与全不选和反选相关推荐

基于原生JS项目使用Vue3 + Surely Vue Table组件
Js & Surely Vue Table 本文主要说明,基于原生JS项目如何使用Surely Vue Table组件. Surely Vue Surely Vue Table 是 Ant D ...
html 对勾单选框,利用原生js和jQuery实现单选框的勾选和取消操作的方法
根据以下的Demo,大概就可以看的明白 Demo: window.onload = function(){ var dom_a = document.getElementById('a1'); var ...
原生js实现点击按钮切换全屏！
使用fullScreen API实现全屏 <head><meta charset="UTF-8"><meta name="viewport& ...
原生JS项目练习——tab选项卡功能
一.主要功能介绍: 1.写UI结构 2.获取元素 3.for循环遍历数组,给每一个li添加一个index属性并赋值.(原因等会会总结) 4.绑定鼠标的mousemove事件,鼠标移到某个模块,将该模块 ...
JS 原生实现复选框全选反选功能
** JS 原生实现复选框全选反选功能 ** 按钮功能实现思路: 全选按钮: 直接将全选按钮的状态赋值给每一个复选框. 复选框:只有当所有的复选框选中时,全选按钮才能选中,所以每当复选框每点击一次就 ...
原生js实现table 横向纵向全选功能
要实现这种功能,很明显用elment ui实现不了.element ui 纵向需要prop名字不一样才能展示,很明显,我这个一层二层是名字一样的数组期望后台返回数组是这种格式. 所有需要自己用ta ...
使用原生js实现按钮的全选功能，简单清晰
1.相信有很多朋友在学习前端原生JS的时候,都有遇到过实现全选按钮的需求吧.废话不多说直接上代码吧! <!DOCTYPE html> <html lang="en" ...
php单屏网站源码,关于原生js实现类似fullpage的单页/全屏滚动的方法
这篇文章主要介绍了利用原生js实现类似fullpage的全屏滚动的实现方法,文中给出了完整的实例代码,相信对大家的理解和学习具有一定的参考价值,需要的朋友们可以参考借鉴,下面来一起看看吧. 前言单页 ...
利用JS来实现表格的全选、全不选、反选以及删除的功能
利用JS来进行表格的选择删除等功能二.代码 1.表格的制作以及事件的绑定 2.全选按钮的功能实现 3.全不选按钮的功能实现 4.反选按钮的功能实现 5.删除按钮的功能实现 6.鼠标悬停时颜色的变化 ...

原生JS项目练习——全选与全不选和反选

一、主要功能介绍：

二、JS代码详细步骤解析：

JS代码：

三、全部代码：

感谢：@有鱼是只猫提供的视频

原生JS项目练习——全选与全不选和反选相关推荐

最新文章

热门文章