开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

js简单表格列表全选反选代码

在JavaScript中实现一个简单的表格列表的全选和反选功能，可以通过以下步骤来完成：

基础概念

全选：选中表格中的所有行。
反选：选中当前未选中的行，并取消选中当前已选中的行。

相关优势

用户体验：提供便捷的操作方式，使用户能够快速选择或取消选择所有项目。
代码简洁：使用JavaScript可以轻松实现这一功能，不需要复杂的逻辑。

类型与应用场景

类型：这是一种常见的UI交互功能，适用于任何需要批量操作的表格列表。
应用场景：例如，在电商平台的购物车页面，用户可以全选所有商品进行结算；在管理后台的数据列表中，管理员可以全选数据进行批量删除或修改。

示例代码

以下是一个简单的HTML和JavaScript代码示例，展示了如何实现表格的全选和反选功能：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格全选反选示例</title>
<style>
  table {
    width: 100%;
    border-collapse: collapse;
  }
  th, td {
    border: 1px solid #ddd;
    padding: 8px;
  }
  th {
    background-color: #f2f2f2;
  }
</style>
</head>
<body>

<table id="itemTable">
  <thead>
    <tr>
      <th><input type="checkbox" id="selectAll"></th>
      <th>商品名称</th>
      <th>价格</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input type="checkbox" class="itemCheckbox"></td>
      <td>商品A</td>
      <td>¥100</td>
    </tr>
    <tr>
      <td><input type="checkbox" class="itemCheckbox"></td>
      <td>商品B</td>
      <td>¥200</td>
    </tr>
    <!-- 更多行 -->
  </tbody>
</table>

<script>
  document.getElementById('selectAll').addEventListener('change', function() {
    var checkboxes = document.querySelectorAll('.itemCheckbox');
    for (var i = 0; i < checkboxes.length; i++) {
      checkboxes[i].checked = this.checked;
    }
  });

  document.querySelectorAll('.itemCheckbox').forEach(function(checkbox) {
    checkbox.addEventListener('change', function() {
      var allChecked = true;
      document.querySelectorAll('.itemCheckbox').forEach(function(cb) {
        if (!cb.checked) allChecked = false;
      });
      document.getElementById('selectAll').checked = allChecked;
    });
  });
</script>

</body>
</html>

解释

HTML部分：
- 创建一个表格，其中包含一个全选复选框（id="selectAll"）和多个商品项的复选框（class="itemCheckbox"）。

JavaScript部分：
- 为全选复选框添加事件监听器，当其状态改变时，更新所有商品项复选框的状态。
- 为每个商品项复选框添加事件监听器，当任意一个商品项复选框状态改变时，检查所有商品项复选框是否都被选中，并相应地更新全选复选框的状态。

通过这种方式，可以实现一个简单而有效的全选和反选功能，提升用户体验。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

JQ实现表格全选、反选功能

下面代码是使用JQ，实现表格列表的全选和反选功能，实际较为简单，主要做为教学使用：表格全选... 全选 ... js/jquery.min.js"> js/bootstrap.min.js...(".td-list").prop("checked", status); }); $("#reverse_election").click(function () { //更改成全选状态

1.4K1 0

【案例】js全选反选按钮的实现

效果图思路全选首先要使给全选按钮设置一个点击事件，在点击选中时可以使下面的每个多选按钮都选中。...让每个多选按钮checked的状态都和全选按钮一致反选首先给每个多选按钮设置一个点击事件，让每个多选按钮都选中时全选按钮也被选中可以先给全选按钮设置选中，然后判断一下如果有多选按钮没有被选中，...则令全选按钮也不被选中实现文字改变使用三元运算符判断当前的先择状态，在根据状态给文字设置内容代码实现全选...'取消' : '全选' }) // 反选 for (let i = 0; i < cks.length; i++) { cks[i].addEventListener

4.8K3 0

超实用多选框 checkbox 功能——全选、不选、反选等功能的数据驱动 JS 实现

超实用多选框 checkbox 功能——全选、不选、反选等功能的数据驱动 JS 实现对多选框实现全选、不选、反选是一个常见的功能，尤其是在外面使用了 vue 或者 react 等前端框架之后，仅仅是需要数据处理...首先，要实现的上面的蓝色的按钮的功能，对于整个区块都要实现全选、不选、反选等功能。这没什么好说的，基础功能而已。其次，要实现各个分组内多选框的全选、不选、反选等功能。...那么，我们在实现这个功能的时候，就需要如下数据了：操作类别，是全选，不选，还是反选呢？这里，我用 all | no | reverse 这三个字符串来进行标识。已经选择的数据数组。...代码实现祖师爷教导我们说—— Talk is cheap.Show me your code. /* 多选框全选反选不选工具方法，支持单层和双层数据处理参数说明： type: String...我们通过视频来看一下我们的实现效果：超实用多选框 checkbox 功能——全选、不选、反选等功能的数据驱动 JS 实现最后，希望我的这段代码能够对各位看官有所帮助。

4.3K1 0

JavaWeb——JQuery之基础案例实战（实现表格隔行换色、实现全选全不选、QQ表情选择、下拉列表选中条目左右选择功能）

1 实现表格隔行换色【需求】：将数据行的奇数行背景色设置为 pink，偶数行背景色设置为 yellow 【代码实现】：全选全不选【需求】：点击第二行的checkbox，需要保证下边的选中状态和第一个复选框的选中状态一致即可【代码实现】： <!...3 QQ表情选择【需求】：点击qq表情，将其追加到发言框中【代码实现】：注意clone方法的使用列表选中条目左右选择功能【需求】：实现下拉列表选中条目左右选择功能【代码实现】： <!...$(function () { //toRight $("#toRight").click(function () { //获取右边的下拉列表对象，append(左边下拉列表选中的

2.6K2 0

【Java 进阶篇】JQuery 案例：全选全不选，为选择添彩

前言在网页开发中，表格是一种常见的数据展示方式，而提供全选和全不选的功能，不仅可以提高用户体验，还可以简化用户操作，使页面更加友好。...JQuery 全选全不选实现原理全选全不选的实现原理十分简单，主要涉及到以下几个步骤：选择触发全选和全不选操作的元素，如一个复选框或按钮。...实际应用场景全选全不选功能不仅仅局限于表格，它在各种列表、多选项等场景都有着广泛的应用。下面是一些实际应用场景的例子： 1....商品列表在购物网站的购物车或商品列表中，用户可能需要同时选择多个商品进行结算或删除。全选全不选功能可以大大简化这一过程。 <!...总结通过本篇博客，我们深入学习了如何使用 JQuery 实现全选全不选功能，为用户提供更便捷的操作体验。通过简单的代码示例，我们了解了全选全不选的基本实现原理和实际应用场景。

3594 0

第3章 WEB03- JS篇-视频教程-第二部分

11-案例三：JS控制表格隔行换色的总结第一行不换色 12-案例四：JS控制复选框的全选和全不选-需求和分析 13-案例四：JS控制复选框的全选和全不选-代码实现 14-案例四：JS控制复选框的全选和全不选...-总结DOM 15-案例五：JS控制二级联动的需求和分析 16-案例五：JS控制二级联动的代码实现 17-案例五：JS控制二级联动的总结内置对象 18-案例五：JS控制二级联动的总结全局函数 19-案例六...：JS控制下拉列表左右选择-需求 20-案例六：JS控制下拉列表左右选择-分析和代码实现 1.4 使用JS控制表格的各行换色 1.4.1 需求在网站的后台的表格页面中让表格显示出隔行换色的效果： 1.4.2...控制复选框的全选和全不选的效果 1.5.1 需求的分析：在后台管理页面中，往往会有批量删除数据的效果，就需要有复选框全选和全部选的效果。...的代码来运行 1.7 JS控制下拉列表左右选择： 1.7.1 需求：有两个列表，需要将左侧列表中的数据添加到右侧的列表中： 1.7.2 分析： 1.7.2.1 步骤分析：单击事件：编写函数：获得左侧的下拉列表

3K2 0

Axure高保真教程：多选树形表格

一、效果展示点击表格左侧箭头，可以展开或者收起该行内容的子级内容点击父级行的多选按钮，可以选中或者取消选中当前行内容以及子级行内容点击子级行的多选按钮，可以选中或取消选中当前行的内容，并且根据子级选中的数量自动反选父级行...2）表格内容表格内容我们用中继器制作，内容包括箭头形状、多选按钮、矩形和文字标签，如下图所示摆放：多选按钮——这里我们的多选按钮不是用自带的多选按钮，因为自带的多选按钮只有2中状态（已选和未选），我们需要用三种状态...那如果记录选中数和中继器表格看到的行数一样，就代表全部的子级都被选中，我们用更新行的交互，更新对应的父级行xuanzhong列的值为全选；如果记录选中数和中继器表格看到的行数不一样，并且记录数大于1，代表有部分子级被选中...，但是在后面取消选中的时候会，所以我们写好这个交互，后续直接触发就可以了；最后我们移除对中继器的筛选：6）鼠标点击半选按钮时这里和上面思路基本一致，但是比上面要简单，因为半选按钮只有父级行才会出现，所以理论上我们不需要判断是否为负极...然后在判断对应父级行是半选状态还是未选状态，这里和上面鼠标单击未选按钮的思路是一样的，都是先筛选出和该行相同父级的子级，然后通过记录数和表格可视行数的关系，对负级行进行一个反选的操作。

1341 0

jQuery实战

5、综合案例复选框 5.1、案例效果 5.2、分析和实现功能分析全选为全选按钮绑定单击事件。获取所有的商品项复选框元素，为其添加 checked 属性，属性值为 true。...反选为反选按钮绑定单击事件获取所有的商品项复选框元素，为其添加 checked 属性，属性值是目前相反的状态。代码实现反选"> .../jquery-3.3.1.min.js"> //全选 //1.为全选按钮添加单击事件 $("#selectAll").click(function...false $(".item").prop("checked",false); }); //反选 //1.为反选按钮添加单击事件 $("#reverse

1.9K2 0

Web-第四天 jQuery学习

3.1 案例介绍重写JavaScript时案例“全选/全不选” 3.2 案例相关的函数 3.2.1 属性操作：prop() 和attr() ?.../全不选，反选 6.1 反选：循环checkbox，依次取反 $(function(){ // 全选 $("#selectAllId")..../ 全选 $("#selectAllId").click(function(){ $(".itemSelect").prop("checked" , this.checked); }); // 反选 $...this.checked; }); }); }); 6.3 点击列表项后，全选按钮是否选中 $(function(){...，如果不是全部勾选，那么“全选”按钮不勾选 $(".itemSelect").click(function(){ $("#selectAllId").prop("checked",$(".itemSelect

3.5K4 0

JavaScript---网络编程(10)--DHTML技术演示(3)-多选框

checkbox的使用1：演示代码： <meta http-equiv="Content-Type" content="text/html; charset...trColor(); } 邮件列表...反选" onclick="checkAllByBtn2()"> <input type="button" value...//遍历所有的邮件多选框 for(var x=0;x<collMailNodes.length;x++){ if(num>1){//反选...type="button" value="反选" onClick="checkAllByBtn(2)"> <input type="button" value="删除所选邮件

1.2K1 0

与Ajax同样重要的jQuery（2）

() 读取文本内容 text(content) 设置文本内容 l 文本框、下拉列表框、单选框选中的元素值 val() 读取元素value属性 val(content) 设置元素value属性练习3：...练习7： ² 表格数据添加与删除练习 js"> $(function(){ // 全选/ 全不选 $("#checkallbox...("#checkAllNotBtn").click(function(){ $("input[name='hobby']").removeAttr("checked"); }); // 反选 $("#checkOppoBtn...="反选" id="checkOppoBtn" /> ?

6.2K5 0

【学习笔记】解决layui的table分页没有checkbox记忆功能！！！

"> js代码由于我还是用到了vue框架，为了更好的使用layui我还创建了一个layui-config.js文件 var element,$,layer,laydate...文件,handle.js文件，以下主要贴上table处理的代码 //记录当前页数据的临时变量 var cookiePageArray = []; var saleInfoCols = [[ //表头...未勾选生成的代码：已勾选生成的代码...由于我的limit是每页显示13行，也就是说按道理每页不算上全选按钮应该只有13个checkbox，后来我使用以下代码打印出来是26个checkbox。

5.8K2 0

Java学习日记

注：*用列表的形式也可以显示数据对象集合。列表本质是由列表项组成的，列表项是块级元素，这是和表格的单元格的最大不同，因为单元格默认是从左到用的顺序排列的，而列表项是块级元素，从上到下的排列顺序。...而且列表和表格有很大的相似之处，例如：表格中可以嵌套表格，列表中可以嵌套列表，都是大区块里装着小区块，小区块里面装着要显示的数据内容。*一般是表单里面套一个表格用于布局，控制表单的结构。...*以前的网页使用表格来布局，但是灵活性很差，所以渐渐地用区块加浮动的布局（专业术语：DIV+CSS）. 11. 表格与列表*表格：由列名和一行一行的数据记录组成，主要的数据作用就是显示数据。...必须要有一个全选的功能。2. 单击父权限的时候，子权限也必须要全选。3. 单击子权限的时候，父权限也要被选中。4. 当子权限的勾选全部取消时，父权限也要取消勾选。实现方案：1....Js中的闭包(closure)：简单地理解就像Java类中的全局依赖，只不过在Js中是方法中的一个局部依赖，父方法中嵌套的子方法操作该依赖的对象。

6074 0

React Hook + TS 购物车实战（性能优化、闭包陷阱、自定义hook）

github.com/sl1673495/r… 需求分解作为一个购物车需求，那么它必然涉及到几个需求点：勾选、全选与反选。根据选中项计算总价。...全选反选逻辑有了filterChecked函数以后，我们也可以轻松的计算出派生状态checkedAll，是否全选： // 全选 const checkedAll = cartData.length !...== 0 && filterChecked().length === cartData.length 复制代码写出全选和反全选的函数： const onCheckedAllChange = newCheckedAll...反选就把checkedMap赋值为空对象。...自定义hook之useChecked 那么下一个场景，又遇到这种全选反选类似的需求，难道我们再这样重复写一套吗？这是不可接受的，我们用自定义hook来抽象这些数据以及行为。

1.7K2 1

vue结合vuex实现购物车

观察页面，灰色标签标识了页面的功能，具体功能分析如下： 1、可以实现全选/反选功能，全选/反选功能和每件商品的选中功能联动。 2、商品数量增减功能，商品数量的修改会同步到服务端。...首先就是购物车的列表数据，用js表示的话就是一个数组数据，数组每一项应该是一个对象，那么对象中有哪些属性呢？看图说话： ?...再看car模块的代码： import local from "@/utils/local.js"; let car = { state: { carlist: [] },...updatecar指令根据传递的参数修改carlist，select指令将carlist中商品改为全选或全部选。...全选/反选的功能分两部分，首先是点击全选复选框能够修改所有商品的选中状态，我们在全选的复选框上绑定一个chang事件，当用户触发这个事件的时候，去触发selectall这这个action，这个action

2.4K3 0

Javascript 原生全选反选不选实战练习

不选反选 ...This.checked = false : This.checked = true; }; }; } 学习原生JS的关键点，就是，思路思路思路！...~ 效果见：http://runjs.cn/detail/m0biuryy 今天搞了个这个东西，分享代码倒是相当简单。 ---- 想想还是太不完美了，为什么要分为三个函数呢？...This.checked = false; break; case "ReCheck": // 反选...的多选框反选操作 */ 又练习了一下 switch 方法

8293 0

解决Vue 3 + Element Plus树形表格全选多选以及子节点勾选的问题

创建树形表格 2. 实现全选功能 3. 实现多选功能 4. 实现子节点勾选 5....实现父节点勾选结论欢迎来到Java学习路线专栏~解决Vue 3 + Element Plus树形表格全选多选以及子节点勾选的问题 ☆* o(≧▽≦)o *☆嗨~我是IT·陈寒 ✨博客主页：IT...本文将介绍如何解决Vue 3和Element Plus树形表格中的这些常见问题，并提供示例代码以便于理解。...问题描述在树形表格中，通常需要实现以下功能：全选：用户可以通过勾选表头的复选框来选中所有节点。多选：用户可以通过勾选每一行的复选框来选中特定节点。...结论在本文中，我们解决了Vue 3和Element Plus树形表格中的全选、多选、子节点勾选和父节点勾选等常见问题。

1.4K1 0

jquery的数据增删改查（全选，反选，全不选，批量删除，添加信息）

效果图如下： html代码如下：全选批量删除反选全不选...// 女 // // // // 将数据放到表格中...click",function(){ $(this).parent().parent().remove() }) }) //点击全选...) seleAll.each(function(){ seleAll.prop('checked',true) }) }) // 反选

2291 0

前端-part9-jQuery操作样式二：元素追加+事件冒泡

text(s + "不能为空").css("color", "red"); } } }); 8.关于全选和取消全选以及反选的例子...content-Type" charset="UTF-8"> 全选和反全选... 反选取消 js"></script...() { $(":checkbox").prop("checked", false);// 将 "checked" 属性设置为 false，即全不选 }...属性，即全部为对应反属性 } } ) 9.文件操作之添加操作 ( 设置 PyCharm 的 JavaScript

1.8K3 0

利用JQuery操作form表单，例如：text,radis,checkbox,file等等之类的

选中所有奇数设置checkbox反选...checkboxValue").on("click", function () { var i=1; $("[name='Fruit']").each(function(){//反选...function () { $("[name='Fruit']:even").attr("checked",'true');//选中所有奇数 }); //设置checkbox反选...$("#checkboxOver").on("click", function () { $("[name='Fruit']").each(function(){//反选...如果大家想要源代码或者对文章有啥异议都可以加我QQ：208017534 欢迎打扰哦！！！

2.1K7 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭