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>

  • 相关阅读:
    Design Thinking 设计思维
    SELECT小技巧
    网站架构
    代码生成器重构
    如何监控你的鼠标
    Asp.net超轻异步框架
    跨线程修改UI控件
    NPOI组件
    浅析Linux计算机工作机制
    VS2010单元测试
  • 原文地址:https://www.cnblogs.com/lizihong/p/javascript.html
Copyright © 2011-2022 走看看