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-top: 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; } }})()

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持好吧啦网。