checkbox的全选，全不选，反选功能
Posted ustc-yy
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了checkbox的全选，全不选，反选功能相关的知识，希望对你有一定的参考价值。
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 </head> 7 <script> 8 window.onload = function () { 9 let btns = document.getElementsByTagName(‘button‘); 10 let inputs = document.getElementById(‘bottom‘).getElementsByTagName(‘input‘); 11 btns[0].addEventListener(‘click‘, function () { 12 for (let i = 0; i < inputs.length; i++) { 13 inputs[i].checked = true; 14 // console.log(1) 15 } 16 }); 17 btns[1].addEventListener(‘click‘, function () { 18 for (let i = 0; i < inputs.length; i++) { 19 inputs[i].checked = false; 20 } 21 }); 22 btns[2].addEventListener(‘click‘, function () { 23 for (let i = 0; i < inputs.length; i++) { 24 inputs[i].checked = inputs[i].checked ? false : true; 25 } 26 }); 27 } 28 </script> 29 <body> 30 <div id="top"> 31 <button>全选</button> 32 <button>取消</button> 33 <button>反选</button> 34 </div> 35 <div id="bottom"> 36 <ul> 37 <li>选项: <input type="checkbox"></li> 38 <li>选项: <input type="checkbox"></li> 39 <li>选项: <input type="checkbox"></li> 40 <li>选项: <input type="checkbox"></li> 41 <li>选项: <input type="checkbox"></li> 42 <li>选项: <input type="checkbox"></li> 43 <li>选项: <input type="checkbox"></li> 44 <li>选项: <input type="checkbox"></li> 45 <li>选项: <input type="checkbox"></li> 46 <li>选项: <input type="checkbox"></li> 47 </ul> 48 </div> 49 </body> 50 </html>
以上是关于checkbox的全选，全不选，反选功能的主要内容，如果未能解决你的问题，请参考以下文章
vue-cli实现最简单的全选全不选反选功能。不容错过呦！！！！！话不多说直接上代码。。。。