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

来源：互联网发布：java phantomjs pdf 编辑：程序博客网时间：2024/06/07 00:28
<!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>
0 0