<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;
            width: 179px;
        }
        #Checkbox1
        {
            height: 25px;
            width: 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>

javascript 全选与反选的更多相关文章

  1. Javascript全选，反选，全不选的实现代码

    使用js实现全选.反选.全不选. 代码如下: <html> <head> <script type="text/javascript"> fun ...

  2. javascript 全选 反选 js代码

    <script type="text/javascript"> //全选function checkAll() { var objs = window.document ...

  3. JavaScript内容梳理 示例之模态对话框 示例之全选和反选以及取消 示例之后台管理左侧菜单

    <!DOCTYPE html> <!--示例之模态对话框--> <html lang="en"> <head> <meta c ...

  4. 用 JS（JavaScript ）实现多选、全选、反选

    JS小例题 学习内容: 需求 总结: 学习内容: 需求 用 JavaScript 实现全选.反选.多选 实现代码 <!DOCTYPE html PUBLIC "-//W3C//DTD ...

  5. checkbox 全选，反选 ，全不选

    在表格或者列表中经常会遇到要全选或者反选等交互,今天总结了一下代码,保留着以后直接拿来用 原理: 1. 全选:当全选checkbox被点击(不管点击之前是什么状态)后,获取其checked状态.然后对 ...

  6. jQuery全选与反选，且解决点击只执行一次的问题

    <html> <head> <script src="jquery-1.11.1.min.js" type="text/javascript ...

  7. Jquery 全选、反选问题解析

    最近工作中,需要使用Jquery实现复选框的全选和反选,本人虽然不是专职撸前端的,但这个小问题感觉也没什么难度,下面直接上代码: <div id="list"> < ...

  8. Checkbox 全选、反选

    1.全选.反选 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></t ...

  9. Jquery全选与反选checkbox（代码示例）

    今天在公司要实现操作权限的功能,需要根据左边的树,选择一项,判断右边的操作权限,例如,增加,修改,删除,查看等按钮的显示与隐藏: 这个功能实现思路如下: 1.操作权限:增加.修改等按钮的ID和Text ...

随机推荐

  1. Longest Substring Without Repeating Characters 最长不重复子串

    只遍历一次字符串即可求出最长不重复子串的长度. int lengthOfLongestSubstring(string s) { vector<,-); //记录字符上一次出现的位置,ASCII ...

  2. rem和em和px vh vw和% 移动端长度单位

    1.rem和em.px 首先来说说em和px的关系 em是指字体高度 浏览器默认1em=16px,所以0.75em=12px;我们经常会在页面上看到根元素写的font-size:65%; 这样em就成 ...

  3. 《think in python》学习-9

    think in python think in python -9 案例分析:文字游戏 从文本文件中读取文字 作者提供了一个文本文件words.txt 地址 本章后面案例也会用带该文件中的词组 fi ...

  4. Windows系统的安装

    一.写在前面        笔者最近因为换工作,在家待业甚感无聊,于是想要整理一些在Windows系统的一些安装方法和下载资源,一来给自己做个备忘,二来把一些不成熟的想法分享出去,希望大家予以指正. ...

  5. HTML——表格与表单

    1.表格 <table></table> background:背景图片. 属性 值 描述 align left center right 不赞成使用.请使用样式代替. 规定表 ...

  6. iOS设计模式解析（三）适配器模式

    适配器模式:将一个类的借口转换成客户端希望的另一个接口 有一个很直观的图: 例如      :电源适配器(将110V电压转换成220V电压,其中Traget是220V电压,adaptee就是110V电 ...

  7. beforefieldinit释义

    首先让我们认识什么是,当字段被标记为beforefieldinit类型时,该字段初始化可以发生在任何时候任何字段被引用之前.这句话听起了有点别扭,接下来让我们通过具体的例子介绍. /// <su ...

  8. 【MVC】过滤器

    APS.NET MVC中(以下简称“MVC”)的每一个请求,都会分配给相应的控制器和对应的行为方法去处理,而在这些处理的前前后后如果想再加一些额外的逻辑处理.这时候就用到了过滤器. MVC支持的过滤器 ...

  9. 获取ajax对象

    function ajaxFunction(){ var xmlHttp; try{ // Firefox, Opera 8.0+, Safari xmlHttp=new XMLHttpRequest ...

  10. html5新增结构元素

    1.article元素代表文档.页面或应用程序中独立的.完整的.可以独自被外部引用的内容.除了内容外,一个article元素还有它自己的标题(一般放在header里),有时还有自己的脚注. 2.sec ...