<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<html>
    <head>
        <script type="text/javascript" src="jquery-1.8.3.min.js"></script>
        <script type="text/javascript">
        //全选
        //得到input然后得到type的属性
                function selectAll(){
                    var tag=document.getElementsByTagName("input");
                    for(var i=0;i<tag.length;i++){
                        if(tag[i].type=="checkbox"){
                            tag[i].checked=true;
                        }
                    }
                }
                //全不选
                function noSelect(){
                    var tag=document.getElementsByTagName("input");
                    for(var i=0;i<tag.length;i++){
                        if(tag[i].type=="checkbox"){
                            tag[i].checked=false;
                        }
                    }
                }
                //删除一个
                 function deleteOne(tag){
            var de = window.confirm("确定删除?");
            if(de){
                var tr=tag.parentNode.parentNode;
                var tbody=document.getElementById("tb");
                tbody.removeChild(tr);
            }
               }
               //全部删除
              function deleteAllSelect(){
                 var tbody = document.getElementById("tb");
               var inps = tbody.getElementsByTagName("input");
               for(var i=inps.length-1;i>0;i--){
                  if( inps[i].checked  ){
                      var tr = inps[i].parentNode.parentNode;
                      tbody.removeChild(tr);
                  }
               }
               var first = document.getElementById("first");
               first.checked = null;
            }
        </script>
    </head>
    <body>
        Username:<input type="text" id="name"/>
        Password:<input type="text" id="password"/>
        Email:<input type="text" id="email"/>
        <hr/>
        <table cellpadding='0' cellspacing='0' border='1' align="center" width="70%">
            <tbody id="tb">
            <tr>
                <td><input type="checkbox"  id="first"/></td>
                <td>ID</td>
                <td>Username</td>
                <td>Password</td>
                <td>Email</td>
                <td><input type="button" value="Option"/></td>
            </tr>
            <tr>
                <td><input type="checkbox"/></td>
                <td>1</td>
                <td>zmj</td>
                <td>666666</td>
                <td>114322@qq.com</td>
                <td><input type="button" value="delete" onclick="deleteOne(this)"/></td>
            </tr>
            <tr>
                <td><input type="checkbox" /></td>
                <td>2</td>
                <td>wyb</td>
                <td>999999</td>
                <td>6666@qq.com</td>
                <td><input type="button" value="delete" onclick="deleteOne(this)"/></td>
            </tr>
            <tr>
                <td><input type="checkbox" /></td>
                <td>3</td>
                <td>linlin</td>
                <td>555555</td>
                <td>linlin@com.cn</td>
                <td><input type="button" value="delete" onclick="deleteOne(this)"/></td>
            </tr>
            </tbody>
        </table>
        <hr/>
        <center>
            <input type="button" value="全选" onclick="selectAll()"/>
            <input type="button" value="反选"  onclick="noSelect()"/>
            <input type="button" value="删除所选项" onclick="deleteAllSelect()" />
        </center>
    </body>
</html>

JS全选的更多相关文章

  1. JS全选功能代码优化

    原文:JS全选功能代码优化 JS全选功能代码优化 最近在看javascript MVC那本书,也感觉到自己写的代码也并不优雅,所以一直在想 用另一种模式来编写JS代码,所以针对之前的简单的JS全选功能 ...

  2. 简单JS全选、反选代码

    1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org ...

  3. js全选与反选

    HTML结构: <!doctype html><html><head><meta charset="utf-8"><title ...

  4. js全选checkbox框

    html: <input  type="checkbox" id="checkbox1" value="1" onclick=&quo ...

  5. Js全选 添加和单独删除

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. JS 全选

    第一种情况 1. 首先得有全选  checkall <input type="checkbox" class="checkAll" value=" ...

  7. js全选与取消全选

    实现全选与取消全选的效果 要求1(将军影响士兵):点击全选按钮,下面的复选框全部选中,取消全选按钮,下面的复选框全部取消 思路:复选框是否被选中,取决于check属性,将全选按钮的check属性值赋值 ...

  8. JS——全选与反选

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. js——全选框 checkbox

    一直会碰见input 全选框的问题,先整理一种情况: 1. <input id="selectAll" type="checkbox" />全选 2 ...

随机推荐

  1. C语言 · FJ的字符串

    问题描述 FJ在沙盘上写了这样一些字符串: A1 = "A" A2 = "ABA" A3 = "ABACABA" A4 = "AB ...

  2. DEBUG 调试

    1.Step Into (also F5) 跳入 2.Step Over (also F6) 跳过 3.Step Return (also F7) 执行完当前method,然后return跳出此met ...

  3. Java：注解（Annotation）自定义注解入门

    转载地址:http://www.cnblogs.com/peida/archive/2013/04/24/3036689.html 要深入学习注解,我们就必须能定义自己的注解,并使用注解,在定义自己的 ...

  4. ListBox 如何改变某行的字体颜色

    Option Explicit Private Type RECT Left As Long Top As Long Right As Long Bottom As Long End Type Pri ...

  5. (repost)在ARM Linux内核中增加一个新的系统调用

    实验平台内核版本为4.0-rc1,增加一仅仅打印Hello World的syscall,最后我们在用户空间swi验证 实验平台内核版本为4.0-rc1,增加的系统调用仅仅是简单打印一个Hello Wo ...

  6. Arpa's loud Owf and Mehrdad's evil plan

    Arpa's loud Owf and Mehrdad's evil plan time limit per test 1 second memory limit per test 256 megab ...

  7. Linux镜像资源收集

    1.企业 搜狐开源镜像站: http://mirrors.sohu.com/ 网易开源镜像站: http://mirrors.163.com/ 阿里开源镜像站: http://mirrors.aliy ...

  8. chrom扩展学习

    详细教程-- http://www.ituring.com.cn/minibook/950

  9. C/C++ 语言中的表达式求值(原文作者：裘宗燕)

    经常可以在一些讨论组里看到下面的提问:“谁知道下面C语句给n赋什么值?”m = 1; n = m+++m++;最近有位不相识的朋友发email给我,问为什么在某个C++系统里,下面表达式打印出两个4, ...

  10. delphi 关键字

    下面的关键字不能被重新定义或用作标志符:and array as asm begin case class const constructor destructor dispinterface div ...