<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. 阅读代码工具：Visual Studio Code

    打开一个文件夹,直接阅读,体验还不错 版本: 1.25.1提交: 1dfc5e557209371715f655691b1235b6b26a06be日期: 2018-07-11T15:43:11.471 ...

  2. jquery validator

    jQuery.validate是一款非常不错的表单验证工具,简单易上手,而且能达到很好的体验效果,虽然说在项目中早已用过,但看到这篇文章写得还是不错的,转载下与大家共同分享. 一.用前必备 官方网站: ...

  3. C# 压缩文件 ICSharpCode.SharpZipLib.dll

    效果: 代码只能压缩文件夹里面的文件,不能压缩文件夹. 压缩前: 压缩后: 代码: 需要引用ICSharpCode.SharpZipLib.dll public ActionResult Index( ...

  4. ssh免密码登录之ssh-keygen的用法

    A服务器:192.168.100.2 B服务器:192.168.100.3 要达到的目的:A服务器ssh登录B服务器不需要输入密码 1.在A服务器下使用ssh-keygen命令生成公钥/私钥密钥对,执 ...

  5. python nose测试框架全面介绍一

    一.简介      nose 是python自带框架unttest的扩展,使测试更简单高效:nose是一个开源的项目,可以在官网上下载源码 1.快速安装 有以下几中安装方式: easy_install ...

  6. vuejs学习资料

    Vue.js 是一个轻巧.高性能.可组件化的MVVM库,同时拥有非常容易上手的API,让编写动态的UI界面变得轻松简单. 这里是我整理的相关学习资料: vue.js 中文api vue.js gith ...

  7. Run-Time Check Failure #2 Stack around the variable ‘xxx’ was corrupted

    在改别人代码时,运行报错: Run-Time Check Failure #2 Stack around the variable 'buffer' was corrupted 这表明你对某变量的赋值 ...

  8. nginx中location、rewrite用法总结

    一.location用法总结 location可以把不同方式的请求,定位到不同的处理方式上. 1.location的用法 location ~* /js/.*/\.js 以 = 开头,表示精确匹配:如 ...

  9. HDU-1394 Minimum Inversion Number（线段树求逆序数）

    Minimum Inversion Number Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Ot ...

  10. 线段树（Segment Tree）总结

    0 写在前面 怎么说呢,其实从入坑线段树一来,经历过两个阶段,第一个阶段是初学阶段,那个时候看网上的一些教学博文和模板入门了线段树, 然后挑选了一个线段树模板作为自己的模板,经过了一点自己的修改,然后 ...