javascript实现---全选、反选

最新推荐文章于 2024-04-29 18:09:12 发布
最新推荐文章于 2024-04-29 18:09:12 发布
阅读量529 收藏
点赞数
分类专栏： JS+AJAX+JQUERY 文章标签： javascript input class button table border
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wxlhlh001/article/details/7311513
版权
 

//js实现全选反选源代码，超级简单

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>反选全选</title>
<style type="text/css">
table{
    border:#0FF 1px solid;
    border-collapse:collapse;
    }
    
table th{
        text-align:center;
        }
table td{
    border:1px solid #999;
    text-align:center;
        }
.one{
    background:#9FC;
    }
.two{
    background:#FC6;
    }
</style>
<script type="text/javascript" language="javascript">
function gehang(){
    //获取tr节点
    var tr=document.getElementsByTagName("tr");
    //为第一行添加背景颜色
       tr[0].style.background="#00FF66";
       //为最后一行添加背景颜色
       tr[tr.length-1].style.background="#00FF66";
                }
    //创建全选反选函数
    function xuan(type){
        //获取name值
        var qcheck=document.getElementsByName("check[]");
        //获取选的按钮
        if(type=="qx"){
            for(var i=0;i<=qcheck.length;i++){
                qcheck[i].checked=true;
                                             }
                      }
            if(type=="fx"){
            for(var i=0;i<=qcheck.length;i++){
                qcheck[i].checked=false;
                                              }
                          }
            
            if(type=="qxx"){
            for(var i=0;i<=qcheck.length;i++){
                 if(qcheck[i].checked){
           qcheck[i].checked=false;
                                     }
                                  else{
           qcheck[i].checked=true;
        
            }
                }
            }
        }
        function del(){
            var input=document.getElementsByName("check[]");
            for(var i=input.length-1; i>=0;i--){
                   if(input[i].checked==true){
                       //获取td节点
                       var td=input[i].parentNode;
                      //获取tr节点
                      var tr=td.parentNode;
                      //获取table
                      var table=tr.parentNode;
                      //移除子节点
                      table.removeChild(tr);
                 }
                
                }
        
            }
</script>
</head>
<body οnlοad="gehang()">
<table width="400" border="0" align="center">
  <tr>
    <th><input type="checkbox">全选</th>
    <th>发件人</th>
    <th>邮件名称</th>
    <th>邮件附属信息</th>
  </tr>
  <tr class="one">
    <td><input type="checkbox" name="check[]"></td>
    <td>张三11</td>
    <td>我是邮件11</td>
    <td>我是附属信息11</td>
  </tr>
  <tr class="two">
    <td><input type="checkbox" name="check[]"></td>
    <td>张三12</td>
    <td>我是邮件12</td>
    <td>我是附属信息12</td>
  </tr>
  <tr class="one">
    <td><input type="checkbox" name="check[]" /></td>
    <td>张三13</td>
    <td>我是邮件13</td>
    <td>我是附属信息13</td>
  </tr>
  <tr class="two">
    <td><input type="checkbox" name="check[]"></td>
    <td>张三14</td>
    <td>我是邮件14</td>
    <td>我是附属信息14</td>
  </tr>
  <tr class="one">
    <td><input type="checkbox" name="check[]"></td>
    <td>张三15</td>
    <td>我是邮件15</td>
    <td>我是附属信息15</td>
  </tr>
  <tr class="two">
    <td><input type="checkbox" name="check[]"></td>
    <td>张三16</td>
    <td>我是邮件16</td>
    <td>我是附属信息16</td>
  </tr>
  <tr class="one">
    <td><input type="checkbox" name="check[]"></td>
    <td>张三17</td>
    <td>我是邮件17</td>
    <td>我是附属信息17</td>
  </tr>
  <tr class="two">
    <td><input type="checkbox" name="check[]"></td>
    <td>张三18</td>
    <td>我是邮件18</td>
    <td>我是附属信息18</td>
  </tr>
  <tr>
    <td><input type="checkbox" name="check[]"></td>
    <td>张三19</td>
    <td>我是邮件19</td>
    <td>我是附属信息19</td>
  </tr>
  <tr>
  <th><input type="checkbox">全选</th>
  <td colspan="3" align="center">
  <input type="button" id="qx" οnclick="xuan('qx')" value="全选">
  <input type="button" id="qxx" οnclick="xuan('qxx')" value="取消全选">
  <input type="button" id="fx" οnclick="xuan('fx')" value="反选">
  <input type="button" id="del" οnclick="del()" value="删除所选附件">
  </td>
  </tr>
</table>

</body>
</html>
拼GO
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js实现全选反选
席伟娜的专栏
03-01 2436
//js实现全选反选源代码，超级简单 反选全选 table{     border:#0FF 1px solid;     border-collapse:collapse;     }      table th{         text-align:center;         } table td{     border:1px solid
JS实现全选和反选
kumayato的博客
05-11 293
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script> window.onload = function () { var btns = document.getElementById('top').children;
JS之全选全不选反选的操作
NeWnIx
09-20 2222
练习 对如下的Form表单： form id="test-form" action="test"> legend>请选择想要学习的编程语言：legend> fieldset> p>label class="selectAll">input type="checkbox"> span class="selectAll">全选span>span class="
JS实现选择器全选、反选
yl107的博客
04-28 979
checkbox2 <script> var alltrue = document.getEleme
JavaScript -- 全选反选效果制作
zn0128的博客
10-17 292
我们在网页中经常遇到表单中 全选选中以及反选的效果，以下代码为实现方法： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, init
el-table表格全选反选数据获取以及样式
最新发布
felling_low的博客
04-29 342
表格样式序号形式的全选
用JavaScript实现全选-反选
weixin_43939158的博客
12-25 253
实现全选-反选 在日常生活我们会遇到需要全选-反选的地方，其实用JavaScript也能实现。 样式如下所示： 样式代码如下所示： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <...
el-select全选反选功能
caief的博客
07-31 250
【代码】el-select全选反选功能。
JavaScript-163：全选反选
臧小川的博客
01-11 188
结构 <div class="wrap"> <table> <thead> <tr> <th> <input type="checkbox" name="" id="j-caAll" /> </th>
JavaScript基础---全选与反选
阿木木的博客
07-23 252
全选与反选其实就是遍历出来之后看其状态是true还是false，如果是true就给他的值设置成false，反之亦然。仅供大家参考，不喜勿喷哈 <!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> .show{ width: 800px; margin: 50px auto; } table{ border: 1px
Javascript实现全选反选
08-11
在JavaScript编程中，"全选反选"功能是常见的用户交互设计，常见于表格或列表数据的批量操作中。这个功能允许用户一键选择或取消选择所有项目，极大地提高了操作效率。下面将详细介绍如何使用JavaScript来实现这个...
vue2.0在table中实现全选和反选的示例代码
08-28
在 `home.vue` 文件中，我们可以看到使用 JavaScript 实现全选和反选的逻辑，并使用 `v-on` 指令来绑定事件。 本示例代码展示了 Vue 2.0 中实现 Table 全选和反选的示例代码，并介绍了相关的知识点，包括使用 Vue ...
商业编程-源码-GridView全选反选示例源码.zip
06-21
这个"商业编程-源码-GridView全选反选示例源码.zip"文件很可能是包含了一个实现此功能的示例项目，供开发者参考学习。 在GridView中实现全选和反选通常涉及到以下几个关键知识点： 1. **CheckBoxField**：在...
AngularJS 实现购物车全选反选功能
10-19
购物车全选反选功能是电商网站中常见的需求，允许用户一次性选择或取消选择所有商品。 首先，我们需要创建一个HTML模板，该模板包含一个表格来展示购物车中的商品，以及用于全选和反选的复选框。在这个例子中，我们...
vue实现全选、反选功能
08-30
Vue实现全选、反选功能 Vue实现全选、反选功能是指在Vue中实现选择所有项目或取消选择所有项目的功能。这种功能在实际应用中非常常见，例如在用户管理系统中，需要选择所有用户或取消选择所有用户。 在实现全选、...
三级联动（省市县）兼容火狐，IE，可实现多级联动，附部分数据库供测试
刘海闯的专栏
03-02 3321
area-html2.html   http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml"> 无标题文档 省 市  function getArea(id,p){      //初始化ajax   var xhr = new X
js取值 锁定input
刘海闯的专栏
02-08 1958
$(function(){         var _count = $("#audit-bank-water-grid table tbody tr").length;         if (_count > 1) {             SetReadOnly(document.getElementById("AuditBankWater_waterRate"));       
DOM可以做什么？（一）
刘海闯的专栏
02-28 1370
隐藏和显示 隐藏段落显示段落   上面的按钮可以控制我的显示和消失哦。这个特效就是通过JavaScript配合HTML DOM来完成的。代码如下： JavaScript代码：   function hide(){   document.getElementById("hiddenTest").style.display = "none" ;  }   function
DOM可以做什么？（二）
刘海闯的专栏
02-29 1324
结合使用getElementById()和getElementsByTagName() 有时候我们可能不希望选中网页中的所有的段落，而是选中特定部分的段落(或者是其它元素)。其实我们可以借用以上两个函数来实现，例如如下的代码就会先找到id为content的元素，再进一步选中它内部的段落。 cparas = document.getElementById("content").getElem
uniapp实现全选反选单选van-checkbox-group
09-20
在uni-app中，可以使用van-checkbox-group组件实现全选、反选和单选的功能。首先，你需要在data中定义一个数组来存储checkbox的选中状态： ```javascript data() { return { checkboxOptions: [ { value: '...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值