<style type="text/css">
table {
width: 800px;
text-align: left;
border-collapse: collapse;
} td, th {
padding: 10px;
border: 1px solid black;
}
</style>
<script type="text/javascript"> // 反选
function choose(tag) {
var inputs = document.getElementsByTagName("input");
//全选
for (var i = 0; i < inputs.length - 3; i++) {
var inputNode = inputs[i];
if (tag === 1) {
if (!inputs[i].checked) {
inputs[i].checked = true;
}
//全不选
} else if (tag === -1) {
if (inputNode.checked) {
inputNode.checked = false;
}
} else {
//反选
inputs[i].checked = !inputs[i].checked;
}
}
}
</script>
</head>
<body>
<table cellpadding="2" id="tableId">
<tr>
<th>
选择
</th>
<th>
姓名
</th>
<th>
年龄
</th>
</tr>
<tr>
<td>
<label>
<input type="checkbox">
</label>
</td>
<td>
张三
</td>
<td>
19
</td>
</tr>
<tr>
<td>
<input type="checkbox">
</td>
<td>
李四
</td>
<td>
18
</td>
</tr>
<tr>
<td>
<input type="checkbox">
</td>
<td>
张三
</td>
<td>
18
</td>
</tr>
<tr>
<td colspan="3">
<input type="button" onclick="choose(1)" value="全选">
<input type="button" onclick="choose(-1)" value="全不选">
<input type="button" onclick="choose(0)" value="反选">
</td>
</tr>
</table>

js全选反选的更多相关文章

  1. jquery、js全选反选checkbox

    操作checkbox,全选反选 //全选 function checkAll() { $('input[name="TheID"]').attr("checked&quo ...

  2. JS全选反选功能

    总选框:<input type="checkbox" class="all" name="all"> 子选框: <inpu ...

  3. js全选 反选

    // 全选 反选 allChoose: function (o) { var obj = $.extend(true, { id: "#id", name: "name& ...

  4. js 全选 反选

    1.全选 function selectAll(form){ for (var i = 0; i < form.elements.length; i++) { if (form.elements ...

  5. 关于js 全选 反选

    prop 对于HTML元素本身就带有的固有属性,在处理时,使用prop方法. attr  对于HTML元素我们自己自定义的DOM属性,在处理时,使用attr方法. $("#selectAll ...

  6. html js 全选 反选 全不选源代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  7. js全选反选按钮实现

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

  8. js 全选反选

    <th><input type="checkbox" id="checkall" name="checkall" oncl ...

  9. js和jq实现全选反选

    在前端中用到全选反选的案例并不少,在这里呢我就实现这个功能给大家参考参考. 这里呢就先贴上我的html和css代码 <div class="wrap"> <tab ...

随机推荐

  1. vue Element动态设置el-menu导航当前选中项

    1,npm install vuex --save 2,在src下新建vuex文件夹,新建store.js文件: store.js import Vue from 'vue' import Vuex ...

  2. 供安全工程师实用的SOC模型

    一.背景 如今,安全概念满天飞,什么安全运营中心(SOC).威胁情报(TI).态势感知等等不一而足,这些概念及其背后代表的安全思想都很好,不过很多产品为了迎合国内的工作汇报都做成了很多Dashboar ...

  3. OPENQUERY (Transact-SQL),跨数据库操作。

    在指定的链接服务器上执行指定的传递查询. 该服务器是 OLE DB 数据源. OPENQUERY 可以在查询的 FROM 子句中引用,就好象它是一个表名.OPENQUERY 也可以作为 INSERT. ...

  4. [Key] RegCure Pro

    Serial RegCure Pro  : 4A803-C4F23-422B6-1F3D6 http://www.paretologic.com/product/regcure-pro/

  5. Jmeter TCP取样器配置及发送图解

    最近在通过Jmeter测试TCP发送请求时,遇到相关问题,现记录 查看管方文档,TCP发送有三种启用方式: TCPClientImpl:文本数据,默认为这种 BinaryTCPClientImpl:传 ...

  6. eclipse打断点只进入class文件中的解决办法

    内容来源 https://www.cnblogs.com/scode2/p/8671908.html#undefined 是由于对应的Java类跟编译后的class文件,没有关联上, 解决办法: 在打 ...

  7. Linux shell一行流编程实践

    Linux下很多命令用起来真相当方便,尤其是进行批处理操作时.(话说感觉这种程序也不复杂,windows咋一直不搞一个好用的shell呢) 这里列出一些实际shell操作的应用场景,具体命令的用法与解 ...

  8. mysql数据库恢复

    数据库恢复注意事项: # 数据恢复和字符集关联很大,如果字符集不正确会导致恢复的数据乱码. #MySQL命令和source命令恢复数据库的原理就是把文件的SQL语句,在数据库重新执行的过程. 1.利用 ...

  9. cURL 是一个功能强大的PHP库。

    使用PHP的cURL库可以简单和有效地去抓网页.你只需要运行一个脚本,然后分析一下你所抓取的网页,然后就可以以程序的方式得到你想要的数据了.无论是你想从从一个链接上取部分数据,或是取一个XML文件并把 ...

  10. VS远程调试亲历

    背景: 很多情况下本地开发没有问题,可放到服务器就有问题(更气人的是测试环境时也行可就是生产环境不行!) 1.想到可能是服务器环境不对,Web服务器版本不对 2.有文件读写是不是文件夹权限 3.Web ...