幽灵资源网 Design By www.bzswh.com
本文实例为大家分享了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; } } })()
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
标签:
js,多选框
幽灵资源网 Design By www.bzswh.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
幽灵资源网 Design By www.bzswh.com
暂无评论...