JS全选
<%@ 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全选的更多相关文章
- JS全选功能代码优化
原文:JS全选功能代码优化 JS全选功能代码优化 最近在看javascript MVC那本书,也感觉到自己写的代码也并不优雅,所以一直在想 用另一种模式来编写JS代码,所以针对之前的简单的JS全选功能 ...
- 简单JS全选、反选代码
1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org ...
- js全选与反选
HTML结构: <!doctype html><html><head><meta charset="utf-8"><title ...
- js全选checkbox框
html: <input type="checkbox" id="checkbox1" value="1" onclick=&quo ...
- Js全选 添加和单独删除
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- JS 全选
第一种情况 1. 首先得有全选 checkall <input type="checkbox" class="checkAll" value=" ...
- js全选与取消全选
实现全选与取消全选的效果 要求1(将军影响士兵):点击全选按钮,下面的复选框全部选中,取消全选按钮,下面的复选框全部取消 思路:复选框是否被选中,取决于check属性,将全选按钮的check属性值赋值 ...
- JS——全选与反选
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- js——全选框 checkbox
一直会碰见input 全选框的问题,先整理一种情况: 1. <input id="selectAll" type="checkbox" />全选 2 ...
随机推荐
- java读写锁源码分析(ReentrantReadWriteLock)
读锁的调用,最终委派给其内部类 Sync extends AbstractQueuedSynchronizer /** * 获取读锁,如果写锁不是由其他线程持有,则获取并立即返回: * 如果写锁被其他 ...
- linux/windows平台生成随机数的不同方法
linux平台,使用rand.Seed() //rand_linux.go package main import ( "math/rand" "time" ) ...
- The property System
The property System 和其它编译器厂商一样, Qt 也提供了复杂的属性机制, 但是作为一个编译器无关.平台无关的库,Qt没有那些不被标准编译器支持的特征, 如 BCB的 __prop ...
- 图片上传插件用法,JS语法【三】
注意点: 作为文件域(<input type="file">)必须要有name属性,如果没有name属性,上传之后服务器是获取不到图片的.如:正确的写法是<inp ...
- [SQL基础教程] 3-3 HAVING
[SQL基础教程] 3-3 HAVING HAVING子句 SELECT col_1,col_2 FROM table GROUP BY col_1,col_2 HAVING col_1 = '2'; ...
- 手机浏览器wap网页点击链接触发颜色区块的问题解决办法
引子 在做HTML5 WAP网页的时候,一行内容做了2个链接,点击一个标签的时候,整个颜色块会闪一下,影响美观.需求针对这种情况来问我,能否把这个一闪的颜色去掉.我当时就想,这个怎么去?那我也不好直接 ...
- scala实现快速排序
scala> def qSort(a: List[Int]): List[Int] = { | ) a | else qSort( a.filter(a.head > _ )) ++ | ...
- 如何在IIS8.5上面部署php
一.开启,设置win8.1自带的IIS 8.5组件服务器. 进入控制面板,选择程序和功能,打开或关闭Windows 功能,找到Internet information services,分别开启FTP ...
- 使用MyEclipse构建MAVEN项目
这里用的是MyEclpise的自带的MAVEN插件.Maven最好配置成你自己安装的那个,MyEclipse自带会有些许Bug.用nexus代理Maven的中央仓库,setting.xml的配置文件修 ...
- in_array 判断的一些见解
我个人见解in_array的判断是== 并不是=== 证明如下: $arr=(array_merge(range(1, 9),range('a', 'z'),range('A', 'Z')));$m ...