JS实现多选框的操作
网络编程 2021-07-04 15:03www.168986.cn编程入门
这篇文章主要为大家详细介绍了JS实现多选框的操作,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
本文实例为大家分享了JS实现多选框的具体代码,供大家参考,具体内容如下
多选时:
全选时:
反选时:
html代码
<div class="container"> <h3>请选择你最喜欢吃的水果(多选)</h3> <ul> <li><input type="checkbox">苹果</li> <li><input type="checkbox">雪梨</li> <li><input type="checkbox">西瓜</li> <li><input type="checkbox">哈密瓜</li> <li><input type="checkbox">荔枝</li> <li><input type="checkbox">龙眼</li> </ul> <div class="checkinAll"> <input type="checkbox" id="checkAll">全选/非全选 <input type="checkbox" id="checkTurn">反选 </div> </div>
CSS代码:
*{ margin: 0; padding: 0; } .container{ width: 300px; /* height: 500px; */ /* border: 1px solid black; */ margin: 10px auto; } .container ul{ list-style: none; width: 100%; margin-: 20px; border: 1px solid #666; border-radius: 10px; margin-bottom: 10px; } .container ul li{ width: 100%; height: 70px; border-bottom: 1px solid #666; line-height: 70px; text-indent: 50px; font-size: 16px; font-weight: 600; } .container ul li:last-child{ border-radius: 0 0 11px 11px; border: none; } .container ul li:first-child{ border-radius: 11px 11px 0 0; /* border: none; */ } input[type='checkbox']{ width: 20px; height: 20px; vertical-align: middle; cursor: pointer; -webkit-appearance: none; border: 1px solid #666; border-radius: 3px; } input[type='checkbox']:checked{ background-image: url(./select.png); background-repeat: no-repeat; background-position: center center; background-size: 100% 100%; outline: none; } ul input{ margin-right: 40px; }
JS代码:
(function(){ const list_node = document.getElementsByTagName('li'); const ul_node = document.getElementsByTagName('ul')[0] const colorArr = ['rgb(255,235,205)','rgb(255,240,245)','rgb(255,211,155)']; const check_nodes = ul_node.getElementsByTagName('input'); const checkAll = document.getElementById('checkAll'); const checkTurn = document.getElementById('checkTurn') for(let i = 0; i < list_node.length; i++){ list_node[i].style.backgroundColor = colorArr[i % colorArr.length]; list_node[i].addEventListener('click',clickFn); } function clickFn(e){ console.log(e.target.tagName); let num = 0; if(e.target.tagName == 'INPUT' && e.target.checked == false){ checkAll.checked = false; }else{ for (let i = 0; i < check_nodes.length; i++) { if(check_nodes[i].checked == true){ num++; } } if(num == check_nodes.length){ checkAll.checked = true; } } } //全选/非全选 checkAll.onclick = function(){ if(this.checked == true){ for (let i = 0; i < check_nodes.length; i++) { check_nodes[i].checked = true; } }else{ for (let i = 0; i < check_nodes.length; i++) { check_nodes[i].checked = false; } } } //反选 checkTurn.onclick = function(){ let count = 0; let num = 0; for (let i = 0; i < check_nodes.length; i++) { if(check_nodes[i].checked == true){ check_nodes[i].checked = false; count ++; }else{ check_nodes[i].checked = true; num++; } } if(count == check_nodes.length){ checkAll.checked = false; }else if(num == check_nodes.length){ checkAll.checked = true; } } })()
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持狼蚁SEO。
上一篇:javascript实现前端分页效果
下一篇:微信小程序实现发微博功能的示例代码
编程语言
- 机械手焊接机器人编程 机械手焊接设备编程
- vb数据库编程实例,vb做数据库
- tiobe世界编程语言排行榜,全球编程语言排行
- 成都java编程培训 成都it编程培训中心
- 编程基础培训,编程基础知识培训
- flash游戏编程基础教程,flash游戏开发教程
- 不会英语能学编程吗 不会英语可以学程序员吗
- 爱心代码编程C语言 爱心代码编程c语言公式
- c语言编程学习入门 c语言编程快速入门
- 西门子plc编程培训 西门子plc编程培训班
- 哪里可以学编程 台州哪里可以学编程
- 少儿编程哪个好 少儿编程哪个品牌好
- 编程是什么意思,图形编程是什么意思
- c语言编程软件下载,c语言编程软件在哪下载
- java编程软件下载,java编程下载手机版
- ug编程培训学校,ug编程培训教程