全选,全不选,反选

body中

<body>
    <input type="button" name="name" value="全选" id="btnAll" />
    <input type="button" name="name" value="全不选" id="btnNoAll" />
    <input type="button" name="name" value="反选" id="btnFanXuan" />
<fieldset>
<legend>歌曲</legend>
   <input type="checkbox" name="name" value="1" />真的爱你
     <input type="checkbox" name="name" value="1" />the show
      <input type="checkbox" name="name" value="1" />我的太阳
       <input type="checkbox" name="name" value="1" />再回首<br />
        <input type="checkbox" name="name" value="1" />光辉岁月
         <input type="checkbox" name="name" value="1" />好久不见
          <input type="checkbox" name="name" value="1" />周杰棍的双杰伦
</fieldset>
 
</body>
View Code

<script>标签中

    <script type="text/javascript">
        //全选
        document.getElementById('btnAll').onclick = function () {
            //获取悬索input标签
            var chks = document.getElementsByTagName('input');
            for (var i = 0; i < chks.length; i++) {
                if(chks[i].type=='checkbox')//获取所有checkbox
                {
                    chks[i].checked = true;
                }
            }
        };
        //全不选
        document.getElementById('btnNoAll').onclick = function () {
            var chks = document.getElementsByTagName('input');
            for (var i = 0; i < chks.length; i++) {
                if (chks[i].type == 'checkbox') {
                    chks[i].checked = false;
                }
            }
        };
        //反选
        document.getElementById('btnFanXuan').onclick = function () {
            var chks = document.getElementsByTagName('input');
            for (var i = 0; i < chks.length; i++) {
                if (chks[i].type == 'checkbox') {
                    chks[i].checked = !chks[i].checked;
                }
            }
        };
    </script>
View Code
原文地址:https://www.cnblogs.com/valiant1882331/p/4071386.html