js实现全选与反选

2024-06-08 16:08
文章标签 实现 js 全选 反选

本文主要是介绍js实现全选与反选，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>js实现全选与反选 - 烈火网 Liehuo.Net</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<script language="javascript">
// --列头全选框被单击---
function ChkAllClick(sonName, cbAllId){
var arrSon = document.getElementsByName(sonName);
var cbAll = document.getElementById(cbAllId);
var tempState=cbAll.checked;
for(i=0;i<arrSon.length;i++) {
if(arrSon[i].checked!=tempState)
arrSon[i].click();
}
}


// --子项复选框被单击---
function ChkSonClick(sonName, cbAllId) {
var arrSon = document.getElementsByName(sonName);
var cbAll = document.getElementById(cbAllId);
for(var i=0; i<arrSon.length; i++) {
if(!arrSon[i].checked) {
cbAll.checked = false;
return;
}
}
cbAll.checked = true;
}


// --反选被单击---
function ChkOppClick(sonName){
var arrSon = document.getElementsByName(sonName);
for(i=0;i<arrSon.length;i++) {
arrSon[i].click();
}
}
</script>
</head>


<body>
<form name="form1" method="post" action="">
<table width="500" border="1">
<tr bgcolor="#FFFF66">
<td>
<INPUT name="chkAll" id="chkAll" title="全选" onClick="ChkAllClick('chkSon','chkAll')" type="checkbox" />全选</td>
<td align="center">复选框全选示例 </td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td><INPUT name="chkSon" id="chkSon1" type="checkbox" value='1' οnclick="ChkSonClick('chkSon','chkAll')" />1</td>
<td> 作用： </td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td><INPUT name="chkSon" id="chkSon2" type="checkbox" value='2' οnclick="ChkSonClick('chkSon','chkAll')" />2</td>
<td> a.单击列头复选框全选或全不选子项 </td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td><INPUT name="chkSon" id="chkSon3" type="checkbox" value='3' οnclick="ChkSonClick('chkSon','chkAll')" />3</td>
<td> b.只要有一个子项没有选中，则取消列头的选中状态 </td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td><INPUT name="chkSon" id="chkSon4" type="checkbox" value='4' οnclick="ChkSonClick('chkSon','chkAll')" />4</td>
<td> c.当所有子项目选中时，列头复选框自动置为选中状态 </td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td><INPUT name="chkSon" id="chkSon5" type="checkbox" value='5' οnclick="ChkSonClick('chkSon','chkAll')" />5</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td><INPUT name="chkSon" id="chkSon6" type="checkbox" value='6' οnclick="ChkSonClick('chkSon','chkAll')" />6</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td><INPUT name="chkSon" id="chkSon7" type="checkbox" value='7' οnclick="ChkSonClick('chkSon','chkAll')" />7</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td><INPUT name="chkSon" id="chkSon8" type="checkbox" value='8' οnclick="ChkSonClick('chkSon','chkAll')" />8</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td><INPUT name="chkSon" id="chkSon9" type="checkbox" value='9' οnclick="ChkSonClick('chkSon','chkAll')" />9</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td><INPUT name="chkSon" id="chkSon10" type="checkbox" value='10' οnclick="ChkSonClick('chkSon','chkAll')" />10</td>
<td>d.将复选框反过来选</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr bgcolor="#66FFFF">
<td><INPUT name="chkOpposite" id="chkOpposite" title="反选" onClick="ChkOppClick('chkSon')" type="checkbox" />反选</td>
<td align="center">反选示例</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>
</form>
</body>

</html> 


======++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

<!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>javascript复选框反选与全选删除表格行等简单功能-xw素材网</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 οnclick="xuan('qx')" 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>
<td><input type="checkbox" name="check[]"></td>
<td>张三19</td>
<td>我是邮件19</td>
<td>我是附属信息19</td>
</tr>
<tr>
<td><input type="checkbox" name="check[]"></td>
<td>张三19</td>
<td>我是邮件19</td>
<td>我是附属信息19</td>
</tr>
<tr>
<td><input type="checkbox" name="check[]"></td>
<td>张三19</td>
<td>我是邮件19</td>
<td>我是附属信息19</td>
</tr>
<tr>
<td><input type="checkbox" name="check[]"></td>
<td>张三19</td>
<td>我是邮件19</td>
<td>我是附属信息19</td>
</tr>
<tr>
<td><input type="checkbox" name="check[]"></td>
<td>张三19</td>
<td>我是邮件19</td>
<td>我是附属信息19</td>
</tr>
<tr>
<th><input οnclick="xuan('qx')" 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>

这篇关于js实现全选与反选的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/1042664。

相关文章

python生成随机唯一id的几种实现方法

python生成随机唯一id的几种实现方法

《python生成随机唯一id的几种实现方法》在Python中生成随机唯一ID有多种方法,根据不同的需求场景可以选择最适合的方案,文中通过示例代码介绍的非常详细,需要的朋友们下面随着小编来一起学习学习... 目录方法 1：使用 UUID 模块（推荐）方法 2：使用 Secrets 模块（安全敏感场景）方法
阅读更多...
Spring StateMachine实现状态机使用示例详解

Spring StateMachine实现状态机使用示例详解

《SpringStateMachine实现状态机使用示例详解》本文介绍SpringStateMachine实现状态机的步骤,包括依赖导入、枚举定义、状态转移规则配置、上下文管理及服务调用示例,重点解... 目录什么是状态机使用示例什么是状态机状态机是计算机科学中的​​核心建模工具​​，用于描述对象在其生命
阅读更多...
Spring Boot 结合 WxJava 实现文章上传微信公众号草稿箱与群发

Spring Boot 结合 WxJava 实现文章上传微信公众号草稿箱与群发

《SpringBoot结合WxJava实现文章上传微信公众号草稿箱与群发》本文将详细介绍如何使用SpringBoot框架结合WxJava开发工具包,实现文章上传到微信公众号草稿箱以及群发功能,... 目录一、项目环境准备1.1 开发环境1.2 微信公众号准备二、Spring Boot 项目搭建2.1 创建
阅读更多...
IntelliJ IDEA2025创建SpringBoot项目的实现步骤

IntelliJ IDEA2025创建SpringBoot项目的实现步骤

《IntelliJIDEA2025创建SpringBoot项目的实现步骤》本文主要介绍了IntelliJIDEA2025创建SpringBoot项目的实现步骤,文中通过示例代码介绍的非常详细,对大家... 目录一、创建 Spring Boot 项目1. 新建项目2. 基础配置3. 选择依赖4. 生成项目5.
阅读更多...
Linux下删除乱码文件和目录的实现方式

Linux下删除乱码文件和目录的实现方式

《Linux下删除乱码文件和目录的实现方式》：本文主要介绍Linux下删除乱码文件和目录的实现方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录linux下删除乱码文件和目录方法1方法2总结Linux下删除乱码文件和目录方法1使用ls -i命令找到文件或目录
阅读更多...
SpringBoot+EasyExcel实现自定义复杂样式导入导出

SpringBoot+EasyExcel实现自定义复杂样式导入导出

《SpringBoot+EasyExcel实现自定义复杂样式导入导出》这篇文章主要为大家详细介绍了SpringBoot如何结果EasyExcel实现自定义复杂样式导入导出功能,文中的示例代码讲解详细,... 目录安装处理自定义导出复杂场景1、列不固定，动态列2、动态下拉3、自定义锁定行/列，添加密码4、合并
阅读更多...
mybatis执行insert返回id实现详解

mybatis执行insert返回id实现详解

《mybatis执行insert返回id实现详解》MyBatis插入操作默认返回受影响行数,需通过useGeneratedKeys+keyProperty或selectKey获取主键ID,确保主键为自... 目录 两种方式获取自增 ID：1. ​​useGeneratedKeys+keyProperty（推
阅读更多...
Spring Boot集成Druid实现数据源管理与监控的详细步骤

Spring Boot集成Druid实现数据源管理与监控的详细步骤

《SpringBoot集成Druid实现数据源管理与监控的详细步骤》本文介绍如何在SpringBoot项目中集成Druid数据库连接池,包括环境搭建、Maven依赖配置、SpringBoot配置文件... 目录1. 引言1.1 环境准备1.2 Druid介绍2. 配置Druid连接池3. 查看Druid监控
阅读更多...
Linux在线解压jar包的实现方式

Linux在线解压jar包的实现方式

《Linux在线解压jar包的实现方式》：本文主要介绍Linux在线解压jar包的实现方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录linux在线解压jar包解压 jar包的步骤总结Linux在线解压jar包在 Centos 中解压 jar 包可以使用 u
阅读更多...
c++ 类成员变量默认初始值的实现

c++ 类成员变量默认初始值的实现

《c++类成员变量默认初始值的实现》本文主要介绍了c++类成员变量默认初始值,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧... 目录C++类成员变量初始化c++类的变量的初始化在C++中，如果使用类成员变量时未给定其初始值，那么它将被
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2