zoukankan      html  css  js  c++  java
  • js小练习——页面实现重置、反选、全选三个按钮的功能

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>页面上有10个多选框,实现三个按钮(重置、反选、全选)功能</title>
    </head>
    <body>
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
    <button id="reset">重置</button>
    <button id="invert">反选</button>
    <button id="all">全选</button>
    <script>
    var reset=document.getElementById('reset');
    var invert=document.getElementById('invert');
    var all=document.getElementById('all');
    var checkBox=document.getElementsByTagName('input');
    reset.addEventListener('click',function () {
    for(var i=0;i<checkBox.length;i++){
    checkBox[i].checked=false;
    }
    });
    invert.addEventListener('click',function () {
    for(var i=0;i<checkBox.length;i++){
    /*if(checkBox[i].checked==true){
    checkBox[i].checked=false;
    }else {
    checkBox[i].checked=true;
    }*/
    checkBox[i].checked = !checkBox[i].checked
    }
    });
    all.addEventListener('click',function () {
    for(var i=0;i<checkBox.length;i++){
    checkBox[i].checked=true;
    }
    })

    </script>
    </body>
    </html>
  • 相关阅读:
    STL next_permutation 全排列
    日期问题
    兰顿蚂蚁
    矩阵翻硬币
    数学问题-排列组合
    h5css3_03练习
    h5css3_03
    h5css3_02练习
    h5css3_02
    h5c3_01练习
  • 原文地址:https://www.cnblogs.com/chuangzi/p/6759203.html
Copyright © 2011-2022 走看看