全选,全不选,反选

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

 

你可能感兴趣的:(全选)