您好,登录后才能下订单哦!
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
这篇文章运用简单易懂的例子给大家介绍javascript实现多选框的方法,代码非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。
多选时:
全选时:
反选时:
html代码
<div class="container"> <h4>请选择你最喜欢吃的水果(多选)</h4> <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; } } })()
关于javascript实现多选框的方法就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。