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的全选，全不选，反选功能
猜你喜欢
转载自www.cnblogs.com/ustc-yy/p/12072552.html
今日推荐
周排行