zoukankan      html  css  js  c++  java
  • javascript 全选与反选

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <link href="css/StyleSheet.css" rel="stylesheet" type="text/css" />
        <script type="text/javascript">
            // --列头全选框被单击---
            function ChkAllClick(sonName, cbAllId) {
                var arrSon = document.getElementsByName(sonName);
                var cbAll = document.getElementById(cbAllId);
                var tempState = cbAll.checked;
                for (i = 0; i < arrSon.length; i++) {
                    if (arrSon[i].checked != tempState)
                        arrSon[i].click();
                }
            }

            // --子项复选框被单击---
            function ChkSonClick(sonName, cbAllId) {
                var arrSon = document.getElementsByName(sonName);
                var cbAll = document.getElementById(cbAllId);
                for (var i = 0; i < arrSon.length; i++) {
                    if (!arrSon[i].checked) {
                        cbAll.checked = false;
                        return;
                    }
                }
                cbAll.checked = true;
            }

            // --反选被单击---
            function ChkOppClick(sonName) {
                var arrSon = document.getElementsByName(sonName);
                for (i = 0; i < arrSon.length; i++) {
                    arrSon[i].click();
                }
            }

            function AddTOWISH(sonName) {
                var arrSon = document.getElementsByName(sonName);
                var wishlist = document.getElementById("wishlist");          
                var ps = document.getElementById("wishlist").getElementsByTagName("p");
                for (var j = 1; j<ps.length; j) {
                        var history = document.getElementById("history");          
                        history.appendChild(ps[j]);                
                }           
                for (var i = 0; i < arrSon.length; i++) {
                    if (arrSon[i].checked) {
                        var ele = document.createElement("p");
                        var text = document.createTextNode(arrSon[i].value);
                        ele.appendChild(text);
                        wishlist.appendChild(ele);      
                    }
                }
            }
        
        </script>
        <style type="text/css">
            #Button1
            {
                height: 42px;
                179px;
            }
            #Checkbox1
            {
                height: 25px;
                26px;
            }
        </style>
    </head>
    <body>
           <div id="content">
               <div id="left">
               <ul>
               <li><a><strong>安全类</strong></a></li>
                   <ul>
                   <li><a>金框类</a></li>
                   <li><a>塑框类</a></li>
                   </ul>
                <li><a>运动类</a></li>
                <li><a>时尚金框类</a></li>
                <li><a>时尚塑框类</a></li>
                <li><a>儿童类</a></li>
                <li><a>老花类</a></li>
                <li><a>光学射出类</a></li>
                <li><a>光学板材类</a></li>
                <li><a>光学金框类</a></li>
                <li><a>光学性眼镜</a></li>

               </ul>

               </div>
               <div id="middle">
               <form runat="server">
                 <INPUT name="chkAll" id="chkAll" title="全选" onClick="ChkAllClick('chkSon','chkAll')" type="checkbox" />全选

                 <INPUT name="chkOpposite" id="chkOpposite" title="反选" onClick="ChkOppClick('chkSon')" type="checkbox" />反选

                 <input type="button" id="add" name="add" onclick="AddTOWISH('chkSon')" value="add"/>

                  
                 <br />

                 <%for (int i = 0; i < 10; i++)
                   {%>
                     <INPUT name="chkSon" id='chkSon<%=i+1 %>' type="checkbox"  value='<%=i+1 %>' onclick="ChkSonClick('chkSon','chkAll')" /><%=i+1 %>
                 <br />

                 <%} %>
               </form>
               </div>
               <div id="right">
               <div id="wishlist">
               <p>本次清单内容:</p>
               
               </div>
               <div id="history">
                <p>历史清单内容:</p>
               
               </div>

               </div>
       </div>
    </body>
    </html>

  • 相关阅读:
    【unity3d游戏开发之基础篇】unity3d射线的原理用法以及一个利用射线实现简单拾取的小例子
    【unity3d游戏开发之疑难杂症】Unity3d工程如何与MonoDevelop工具进行调试
    【unity3d游戏开发之疑难杂症】解决Unity3d脚本支持中文问题
    cocos2d 中添加显示文字的三种方式(CCLabelTTF 、CCLabelBMFont 和CCLabelAtlas)
    xcode连不上ipad的原因
    【unity3d游戏开发之疑难杂症】Error while importing package: Couldn't decompress package
    AS3 event flow 事件冒泡机制 以及 stopImmediatePropagation() stopPropagation()用法
    【unity3d游戏开发之基础篇】利用射线实现鼠标控制角色转向和移动(角色移动一)
    Asp.net Session认识加强Session究竟是如何存储你知道吗?
    Windows 7下VS2008无法调试2.0.50727.4952版本mscorlib.dll的解决办法
  • 原文地址:https://www.cnblogs.com/lizihong/p/javascript.html
Copyright © 2011-2022 走看看