明霞山资源网 Design By www.htccd.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.htccd.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
明霞山资源网 Design By www.htccd.com
暂无评论...
《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。