JS实现全选和反选

最新推荐文章于 2023-07-11 22:34:21 发布

kumayato

最新推荐文章于 2023-07-11 22:34:21 发布

阅读量308

点赞数

分类专栏： JavaScript-demo 文章标签： javascript

本文链接：https://blog.csdn.net/kumayato/article/details/71643447

版权

JavaScript-demo 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

<!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>