每天一个js小demo --全选与反选

如图所示

点击全选的时候是全选，点击全不选的时候是全不选，点击反选的时候是反选，这话说的感觉和说了话是的，哈哈哈哈

直接上代码

<body><form action=""><p><input type="checkbox" name="" id="">尼古拉斯·赵四</p><p><input type="checkbox" name="" id="">莱昂纳多·刘能</p><p><input type="checkbox" name="" id="">约翰尼·宋小宝</p><p><input type="checkbox" name="" id="">布拉德·小沈阳</p></form><button onclick="select(0)">全选</button><button onclick="select(1)">全不选</button><button onclick="select(2)">反选</button><script>let input = document.querySelectorAll('input');let btn = document.querySelectorAll('button');//第一种直接写// //第一个按钮是全选，当是全选的时候checked是true// btn[0].addEventListener('click',function(){//     for(let i =0;i<input.length;i++){//         input[i].checked = true;//     }// })// //第二个按钮是全不选，当点击的时候checked是false// btn[1].addEventListener('click',function(){//     for(let n =0;n<input.length;n++){//         input[n].checked = false;//     }// })// //第三个按钮是反选 当点击的时候就是选中的时候取反// btn[2].addEventListener('click',function(){//     for(let m=0;m<input.length;m++){//         input[m].checked = ! input[m].checked//     }// })//第二种封装函数的写法function select(num) {for(let i =0;i<input.length;i++){if(num == 0){input[i].checked = true;}else if(num == 1){input[i].checked = false;}else if(num == 2){input[i].checked = ! input[i].checked}}}</script>
</body>

每天一个js小demo --全选与反选相关推荐

前端小demo——全选和全不选
模拟购物车,实现全选或者全不选,或者其中任意一件单品单选的效果. 点击顶部复选框实现全选列表中任意一项未选中,顶部复选框就是未选中的状态 <!DOCTYPE html> <html ...
Html中 table,list等表格中 js 的 Checkbox全选，反选，单选，获取数据选中行的写法
一:Html页面: <table cellpadding="1" cellspacing="1"> <thea ...
微信小程序全选，微信小程序checkbox，微信小程序购物车
微信小程序,这里实现微信小程序checkbox,有需要此功能的朋友可以参考下. 摘要: 加减商品数量,汇总价格,全选与全不选设计思路: 一.从网络上传入以下Json数据格式的数组 1.标题titl ...
经典案例重点案例：点名表，JS正则验证全选、全不选、反选，点击可以实现三个功能，轮播图字符串截取以及替换，图片切换
重点案例: 点击开始点名,框内的名字转动点击结束点名,框内的转动停止,并出现一个随机的学生姓名 <!DOCTYPE html> <html> <head> ...
微信小程序功能：全选和反选--修改商品数量、删除商品--计算总价格和总数量--收货地址
微信小程序–购物车页面(核心) 包含功能点: 全选和反选计算:总价格和总数量修改商品数量.删除商品收货地址结构:cart.wxml  <view c ...
基于 openGauss 的五子棋 AI 项目，openGauss 设计一个 AI 小 demo
目录 1 前言 2 方案意义 3 架构设计 4 数据表设计 5 代码结构 6 项目演示 7 总结 1 前言 openGauss 是一款全面友好开放的企业级开源关系型数据库.openGauss 采用木兰 ...
纯js实现复选框的全选、反选与获取选中复选框的值
实现效果如下: 全选状态: 取消全选: 获取选中的复选框的值: 下面开始上代码! html <div><h2>爱好</h2><hr><form a ...
js及jQuery实现checkbox的全选、反选和全不选
html代码: <label><input type="checkbox" id="all"/>全选</label> < ...
JS实现全选、反选、不选
JS实现全选.反选.不选效果图: 代码如下,复制即可使用: <!DOCTYPE html> <html> <head><meta charset=" ...

每天一个js小demo --全选与反选

每天一个js小demo --全选与反选相关推荐

最新文章

热门文章