JavaScript全选、全不选、反选小练习

最新推荐文章于 2022-08-11 09:51:36 发布

阅读量445

点赞数

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

本文链接：https://blog.csdn.net/cckevincyh/article/details/53129542

版权

JavaScript 专栏收录该内容

62 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>check.html</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  </head>

  <body>
    您的爱好很广泛!!!
     <br>
     <input type="checkbox" name="checkItems" id="checkItems" value="全选/全不选"/>全选/全不选
     <br>
        <input type="checkbox" name="items" value="足球" />足球
        <input type="checkbox" name="items" value="篮球"/>篮球
        <input type="checkbox" name="items" value="游泳"/>游泳
        <input type="checkbox" name="items" value="唱歌"/>唱歌
        <br>
        <input type="button" name="checkall" id="checkall" value="全选" />
        <input type="button" name="checkall" id="checkallNo" value="全不选" />
        <input type="button" name="checkall" id="check_revsern" value="反选" />
  </body>
  <script language="JavaScript">
        //<input type="button" name="checkall" id="checkall" value="全选" />
        document.getElementById("checkall").onclick = function(){
            /*
             * <input type="checkbox" name="items" value="足球" />足球
                <input type="checkbox" name="items" value="篮球"/>篮球
                <input type="checkbox" name="items" value="游泳"/>游泳
                <input type="checkbox" name="items" value="唱歌"/>唱歌
             */
            var itemsElements = document.getElementsByName("items");

            for(var i=0;i<itemsElements.length;i++){
                var itemsElement = itemsElements[i];
                itemsElement.setAttribute("checked","checked");
            }
        }

        //<input type="button" name="checkall" id="checkallNo" value="全不选" />
        document.getElementById("checkallNo").onclick = function(){
            /*
             * <input type="checkbox" name="items" value="足球" />足球
                <input type="checkbox" name="items" value="篮球"/>篮球
                <input type="checkbox" name="items" value="游泳"/>游泳
                <input type="checkbox" name="items" value="唱歌"/>唱歌
             */
            var itemsElements = document.getElementsByName("items");

            for(var i=0;i<itemsElements.length;i++){
                var itemsElement = itemsElements[i];

                itemsElement.setAttribute("checked",null);
            }
        }


        //<input type="button" name="checkall" id="check_revsern" value="反选" />
        document.getElementById("check_revsern").onclick = function(){
            /*
             * <input type="checkbox" name="items" value="足球" />足球
                <input type="checkbox" name="items" value="篮球"/>篮球
                <input type="checkbox" name="items" value="游泳"/>游泳
                <input type="checkbox" name="items" value="唱歌"/>唱歌
             */
            var itemsElements = document.getElementsByName("items");

            for(var i=0;i<itemsElements.length;i++){
                var itemsElement = itemsElements[i];

                if(itemsElement.getAttribute("checked")){
                    //选中
                    itemsElement.setAttribute("checked",null);
                }else{
                    itemsElement.setAttribute("checked","checked");
                }

            }
        }

        //<input type="checkbox" name="checkItems" id="checkItems" value="全选/全不选"/>全选/全不选
        document.getElementById("checkItems").onclick = function(){
            /*
             * <input type="checkbox" name="items" value="足球" />足球
                <input type="checkbox" name="items" value="篮球"/>篮球
                <input type="checkbox" name="items" value="游泳"/>游泳
                <input type="checkbox" name="items" value="唱歌"/>唱歌
             */
            var itemsElements = document.getElementsByName("items");

//          if(document.getElementById("checkItems").getAttribute("checked")){
//              //选中
//              for(var i=0;i<itemsElements.length;i++){
//                  itemsElements[i].setAttribute("checked","checked");
//              }
//          }else{
//              for(var i=0;i<itemsElements.length;i++){
//                  itemsElements[i].setAttribute("checked",null);
//              }
//          }

            for(var i=0;i<itemsElements.length;i++){
                var itemsElement = itemsElements[i];

                if(this.getAttribute("checked")){
                    itemsElement.setAttribute("checked","checked");
                }else{
                    itemsElement.setAttribute("checked",null);
                }
            }
        }
  </script>
</html>