您的位置：首页 > Web前端 > JavaScript

javascript实现全选与反选

2015-09-29 17:44 567 查看
 <script language="JavaScript">

  //全选/全不选 功能的实现------------------------------------------------------------

        function change(){

        var inputQXNode = document.getElementsByName("CheckItiems")[0];

        var checkNodes = document.getElementsByName("itiems");

        //alert(checkNodes.length);

        for(var i=0;i<checkNodes.length;i++){

            checkNodes[i].checked=inputQXNode.checked;

        }

  }

   //全选 功能的实现------------------------------------------------------------------

  function quanxuan(){

      var checkNodes = document.getElementsByName("itiems");

        //alert(checkNodes.length);

        for(var i=0;i<checkNodes.length;i++){

            checkNodes[i].checked=true;

        }

  }

  //全不选 功能的实现------------------------------------------------------------------

  function quanbuxuan(){

      var checkNodes = document.getElementsByName("itiems");

        //alert(checkNodes.length);

        for(var i=0;i<checkNodes.length;i++){

            checkNodes[i].checked=false;

        }

  }

  //反选 功能的实现------------------------------------------------------------------

  function fanxuan(){

      var checkNodes = document.getElementsByName("itiems");

       

        //alert(checkNodes.length);

        for(var i=0;i<checkNodes.length;i++){

            var flag = checkNodes[i].checked;

            checkNodes[i].checked=!flag;

        }

  }

  </script>

 

  <body>

  <input type="checkbox"   name ="CheckItiems" onchange="change()">全选/全不选<br>

    <input type="checkbox" name ="itiems" value="足球"/>足球<br>

    <input type="checkbox" name ="itiems" value="足球"/>篮球<br>

    <input type="checkbox" name ="itiems" value="足球"/>游泳<br>

    <input type="checkbox" name ="itiems" value="足球"/>唱歌<br>

    <button onclick="quanxuan()">全选</button><button onclick="quanbuxuan()">全不选</button><button onclick="fanxuan()">反选</button>

  </body>

</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  全选 反选 javascript web 软件开发
相关文章推荐
新的分享
章节导航