Javascript 全选反选

最新推荐文章于 2025-08-19 08:41:01 发布
最新推荐文章于 2025-08-19 08:41:01 发布
阅读量41 收藏
点赞数
CC 4.0 BY-SA版权
文章标签： javascript xhtml ViewUI
原文链接：http://www.cnblogs.com/wicub/archive/2013/06/06/3123047.html
本文介绍了如何在HTML表格中使用JavaScript实现选择框的全选、反选功能，并通过事件监听实现了用户交互。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

<!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" xml:lang="en">
<head>
 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
 <title></title>
</head>
<body>
 
 <table id="mytable">
  <tr>
   <td>选中</td>
   <td>编号</td>
   <td>姓名</td>
   <td>空白</td>
  </tr>
  <tr>
   <td><input type="checkbox" /></td>
   <td>2</td>
   <td>张三</td>
   <td><input type="" /></td>
  </tr>
  <tr>
   <td><input type="checkbox" /></td>
   <td>3</td>
   <td>李四</td>
   <td><input type="" /></td>
  </tr>
  <tr>
   <td><input type="checkbox" /></td>
   <td>5</td>
   <td>王五</td>
   <td><input type="" /></td>
  </tr> 
 </table>
 
  <input type="checkbox" onclick="check(this)"/>全选
  <input type="checkbox"  onclick="fanxuan();return false"/>反选
  <!-- 在这里加return fasle是让其自己的按钮一真不被选中 -->
 <script type="text/javascript">
  
  var checks=document.getElementById("mytable").getElementsByTagName("input");
   
  function  check(obj){
   //判断自己是否被选中 
   //alert(obj.checked);
   //如果当自己选中的时候,则全部选中
    //alert(checks.length);
   for(var i=0;i<checks.length;i++){
    if(checks[i].type=="checkbox"){
     checks[i].checked=obj.checked;
     //等于全选的状态
     //或者用
     //checks[i].checked=true;是让他自己选中
    }
   }
  }
  
  function fanxuan(){
   for(var i=0;i<checks.length;i++){
    
    if(checks[i].type=="checkbox"){
     checks[i].checked=!checks[i].checked;
    }
   }
  }
  
 </script>
</body>
</html>

转载于:https://www.cnblogs.com/wicub/archive/2013/06/06/3123047.html

Vue 67 ，JavaScript 31 ，JavaScript实现全选、反选功能（Vue全选、反选，js原生全选、反选）
NorthCity Smile的博客（NcSmile，博主域名：https://ncmile.blog.youkuaiyun.com）
04-02 3099
⭐在JavaScript中，实现全选和反选，通常是通过操作DOM元素和事件监听来实现。全选功能，当用户点击一个“全选”复选框时，页面中所有具有相同类名的复选框都将被选中。反选功能，用户点击一个“反选”复选框时，已选中的将变为未选中，未选中的将变为选中。这里分别使用原生JS和Vue实现，简单分享。
el-checkbox实现全选反选
小白小白从不日别的博客
05-17 261
这里我们选中后直接打印的就是城市的名称。但是在实际工作中可能需要我们传递给后端的是当前选中的id或者是城市的code。以上这里我们反选功能的选中状态跟全选保持的是一致的。那么显然上面这种方式就实现不了，需要我们进行微调。下面我们实现的是反选状态与全选状态不保持一致。ok，那么下面我们就加上 反选 功能。官网给了一个简单的实例，代码如下。比如现在我们将数据格式变为如下。我们先来看看原生实现法。
JavaScript【全选反选案例】
Coding
04-02 232
JavaScript【全选反选案例】
uniapp简单的多选全选反选
weixin_51426266的博客
10-31 212
【代码】简单的多选全选反选。
JavaScript之购物车全选反选案例
LuShanGuoQiLin的博客
08-18 392
代码】JavaScript之购物车全选反选案例。
vue全选反选
Nikki_u的博客
03-10 1128
一、当数据在父组件 并在父组件改变 小选框加入这个值 v-model="item.checked"/ 全选框加入这个值 v-model="isAll" 函数写在computed里面 isAll:{ get(){ return this.arr.every(v=>v.c)//v.c是v.c===true的简写 }, set(val){ this.arr.forEach(v=>{v.c=val})
JavaScript-163：全选反选
臧小川的博客
01-11 237
结构 <div class="wrap"> <table> <thead> <tr> <th> <input type="checkbox" name="" id="j-caAll" /> </th>
vue2element实现全选反选
lingrer的博客
07-04 349
用select 加Checkbox 多选框实现样式。根据业务需求 需要实现一个全选反选 样式如下图。
全选反选小案例
小白小白从不日别的博客
04-19 1185
原理： 当点击全选按钮时，其对应的元素将被去全部选中；当点击反选按钮时，会选中没有选中的元素，之前选中的元素将失去选中；当点击全不选按钮时，其对应的元素都将失去选中状态 核心： 主要就是改变input标签的checked属性 具体代码如下： <input type="button" id="All" value="全选" /> <input type="button" id="uncheck" value="不选" /> <input type="button
JavaScript实现全选、反选功能（Vue全选、反选，js原生全选、反选
2301_82244509的博客
05-08 1162
编程基础的初级开发者，计算机科学专业的学生，以及平时没怎么利用过数据结构与算法的开发人员希望复习这些概念为下次技术面试做准备。或者想学习一些计算机科学的基本概念，以优化代码，提高编程技能。这份笔记都是可以作为参考的。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】data() {return {items: [],},三套“算法宝典”开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】算法刷题LeetCode中文版（为例）
Javascript实现全选反选
08-11
在JavaScript编程中，"全选反选"功能是常见的用户交互设计，常见于表格或列表数据的批量操作中。这个功能允许用户一键选择或取消选择所有项目，极大地提高了操作效率。下面将详细介绍如何使用JavaScript来实现这个...
javaScript实现复选框全选反选事件详解
10-19
本文将详细介绍如何使用JavaScript实现复选框的全选和反选事件。复选框全选和反选是网页交互设计中常见的功能，常用于列表操作、表单提交等场景，允许用户一次性选择或取消选择多个选项。文中将通过实例代码展示如何...
JS简单表格列表全选反选代码.zip
06-07
总的来说，"JS简单表格列表全选反选代码.zip"提供的源码可以帮助开发者理解如何利用JavaScript实现表格的全选和反选功能，这对于前端开发人员来说是一项基础但至关重要的技能。通过学习和实践这个代码，你可以加深对...
checkbox样式美化及全选反选插件
06-01
总的来说，这个插件通过JavaScript和jQuery实现了复选框和单选框的美化，并提供了全选反选功能，对于提升网页表单的用户体验有显著作用。开发者可以研究源代码，学习如何实现类似的效果，也可以直接将此插件整合到...
AngularJS实现全选反选功能
10-23
AngularJS实现全选反选功能的知识点可以分为以下几个方面进行详细介绍： 1. AngularJS基本概念：AngularJS是一种流行的前端JavaScript框架，由Google维护和开发。它的主要目的是通过扩展HTML来简化Web应用的开发。...
JavaScript 核心基础：类型检测、DOM 操作与事件处理
热爱音乐和二次元！
08-15 1338
本文系统梳理 JavaScript 核心知识点，包括数据类型检测规则、遍历方式、DOM操作和事件处理。重点解析 typeof 运算符对不同数据类型的检测结果，数组与对象的遍历方法差异，以及使用 querySelector 获取元素的现代方案。同时详细讲解事件绑定的两种方式（onclick 覆盖 vs addEventListener 多播）和事件冒泡机制，帮助开发者构建扎实的 JS 基础，写出更健壮的代码。
三十四、Vue3项目大屏之SCSS自适应适配屏幕方法
最新发布
张先森的博客
08-19 260
其中 px2vw代表的是高度的适配，px2vh代表的是宽度的适配，我当时着急写反了，但是也可以用，px2vw(1) 大概有1px的大小，如果你先写好了px的标准的1920*1080的设计图，可以直接全局转换。哈喽，大家好，在上次第十五章给大家分享了大屏看板Less适配各种屏幕之后，发现大多数的css都是SCSS,那么今天给大家分享下SCSS的自适应屏幕的方法。底下是原先第十五张的less的适配方法。话不多说，直接上代码。
Less (CSS 预处理器)
2401_87008233的博客
08-18 786
Less是一种CSS预处理器，为CSS添加编程特性如变量、嵌套、混合等，使样式代码更易维护。核心功能包括：变量定义复用值，嵌套反映层级关系，混合实现代码复用，支持运算和颜色函数处理，模块化导入管理。Less需编译为CSS使用，可通过命令行或构建工具实现。与Sass功能相似但语法更贴近CSS，适合提升大型项目的样式开发效率和组织性。
E2B是一个开源基础设施，允许您在云中安全隔离的沙盒中运行AI生成的代码和e2b.dev网站
skywalk8163的专栏
08-17 955
E2B是一个开源的云沙盒服务，允许在隔离环境中运行AI生成的代码。开发者需通过e2b.dev网站注册获取API key，并安装JavaScript或Python SDK来使用该服务。主要竞品包括CodeSandbox（侧重前端开发协作）和Replit（支持多语言在线编程）。E2B的核心优势在于为AI代码提供安全的执行环境，但需依赖其云端服务而非自建。使用示例展示了通过SDK在沙盒中运行简单Python代码的过程。
实现JAVASCRIPT全选与反选功能的实用教程
简单的JAVASCRIPT全选/反选 全选 选项1 选项2 选项3 选项4 document.getElementById('checkAll').addEventListener('click', function() { var checkboxes = document....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值