JS实现全选和反选

来源：互联网发布：淘宝小米6f码多少钱编辑：程序博客网时间：2024/06/06 17:18
<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title>    <script>       window.onload = function () {           var btns = document.getElementById('top').children;           var inputs = document.getElementsByTagName('input');           (function () {              function checked(params) {                  for(var i=0;i<inputs.length;i++){                      inputs[i].checked = params;                  }              };              btns[0].onclick = function () {                  checked(true);              }              btns[1].onclick = function () {                  checked(false)              }              btns[2].onclick = function () {                  for(var i=0;i<inputs.length;i++){                      inputs[i].checked == true ? inputs[i].checked = false: inputs[i].checked = true;                  }              }           })()       }    </script></head><body><div id="top">    <button>全选</button>    <button>取消</button>    <button>反选</button></div><div id="bottom">    <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>        <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></body></html>
0 0