select 全选和反选

最新推荐文章于 2024-04-24 09:22:16 发布
最新推荐文章于 2024-04-24 09:22:16 发布
阅读量2.1k 收藏
点赞数
文章标签： function input javascript server div
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wccczxm/article/details/3538194
版权
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" >
  4. <head runat="server">
  5.     <title>JQuery实现全选和反选</title>
  6.     <script language="javascript" type="text/javascript" src="jquery.js"></script>
  7.     <script type="text/javascript">
  8.     function CheckAll()
  9.     {
  10.         //取消反选的选中状态
  11.         if($("#otherCheck")[0].checked)
  12.         {
  13.             $("#otherCheck")[0].checked=false;
  14.         }
  15.         if($("#allCheck")[0].checked)
  16.         {
  17.             //从div1中获取所有属性type=checkbox的input元素
  18.             $('#div1 input[@type=checkbox]').each(function(i)
  19.             {
  20.                 this.checked=true;
  21.             });
  22.         }
  23.         else
  24.         {
  25.             $('#div1 input[@type=checkbox]').each(function(i)
  26.             {
  27.                 this.checked=false;
  28.             });
  29.         }
  30.        
  31.     }
  32.     function CheckOther()
  33.     {
  34.     //取消全选的选中状态
  35.         if($("#allCheck")[0].checked)
  36.         {
  37.             $("#allCheck")[0].checked=false;
  38.         }
  39.         if($("#otherCheck")[0].checked)
  40.         {
  41.             $('#div1 input[@type=checkbox]').each(function(i)
  42.             {
  43.                 if(this.checked)
  44.                 {
  45.                     this.checked=false;
  46.                 }
  47.                 else
  48.                 {
  49.                     this.checked=true;
  50.                 }
  51.                
  52.             });
  53.         }
  54.         else
  55.         {
  56.              $('#div1 input[@type=checkbox]').each(function(i)
  57.             {
  58.                 if(this.checked)
  59.                 {
  60.                     this.checked=false;
  61.                 }
  62.                 else
  63.                 {
  64.                     this.checked=true;
  65.                 }
  66.                
  67.             });
  68.         }
  69.     }
  70.     </script>
  71. </head>
  72. <body>
  73.     <form id="form1" runat="server">
  74.     <div>
  75.         <div id="div1">
  76.         <input type="checkbox"/>A<br />
  77.         <input type="checkbox"/>B<br />
  78.         <input type="checkbox"/>C<br />
  79.         <input type="checkbox"/>D<br />
  80.         <input type="checkbox"/>E<br />
  81.         <input type="checkbox"/>F<br />
  82.         <input type="checkbox"/>G<br />
  83.         </div>
  84.         <div id="div2">
  85.         <input type="checkbox" id="allCheck" οnclick="CheckAll();" />全选
  86.           
  87.         <input type="checkbox" id="otherCheck" οnclick="CheckOther();" />反选
  88.         </div>
  89.     </div>
  90.     </form>
  91. </body>
  92. </html>
windy
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
全选全不选反选/确认删除
riuhazen的博客
03-11 345
db.php链接数据库后设置编码格式而后在其他页面进行include引入，查询完毕之后，$res = mysql_query($sql);while($arr = mysql_fetch_assoc($res)){$data[]=$arr;}遍历数据&lt;?php foreach($data as $k =&gt; $v){?&gt;&lt;?php echo $v['id'];?&gt;&lt...
JavaScript 高性能编程 —— Data Access 数据访问
cccloveforever的博客
04-20 1454
经典计算机科学的一个问题是确定数据应当存放在什么地方，以实现最佳的读写效率。数据存储在哪里， 关系到代码运行期间数据被检索到的速度。在 JavaScript 中，此问题相对简单，因为数据存储只有少量方 式可供选择。正如其他语言那样，数据存储位置关系到访问速度。每一种数据存储位置都具有特定的读写操作负担。大多数情况下，对一个直接量和一个局部变量数据访 问的性能差异是微不足道的。访问数组项和对象成员的代价要高一些，具体高多少，很大程度上依赖于浏 览器。
JavaScript列表框listbox全选和反选的实现方法
01-19
本文实例讲述了JavaScript列表框listbox全选和反选的实现方法。分享给大家供大家参考。具体分析如下： 通过JS代码对列表框进行全选和反选是经常要操作的，非常具有实用价值。 function listboxSelectDeselect(listID, isSelect) { var listbox = document.getElementById(listID); for(var count=0; count < listbox.options.length; count++) { listbox.options[count].selected = isSel
mysql select 反选_checkbox的全选与反选
weixin_39764487的博客
02-26 653
需求：1.当all选项勾选时，所有选项都被勾选，反正当所有选项被选中时，全选选项自动选中2.点击反选按钮时，被选中的选项取消选中，未被选中的选项被选中Html结构all反选首先，我们得到我们要控制的元素，并且用for循环给每个checkbox绑定点击事件：var all=document.getElementById("all")var box=document.getElementsByTagN...
SELECT 全选,反选——表单
星☆空 | 对生活要知足,学习要不知足,为人处事要知不足. 卍 ♂ | ♀ 卐 - 科技以人为本.
05-05 870
中中
el-select下拉选择器中自定义“全选”功能
zyxczyf123的博客
02-25 1289
在select选择器中，我们有时候需要一次选中全部数据，如果我们一个一个的点击选中，那样速度就会很慢也很耗时间，所以我们需要有一个全选的按钮，但是el-select并没有给我们提供全选选项，所以我们需要自定义一个全选的选项 <Form-item label="可升级大区："> <el-select @change='managementGroupChange' v-model="formItemModal.managementGroupCodesList" col
el-select 下拉框全选、多选的几种方式组件
m0_67841039的博客
10-19 9392
el-select 下拉框全选、多选的几种方式组件
select实现多选、全选、全不选
热门推荐
cat_pp的博客
03-08 5万+
今天使用select下拉框实现了全选，全不选和多选的功能，效果如图： 1、html代码：为select标签设置multiple属性为true <select id="myselect" multiple="true"> <option value="1">java</option> <option value="2">javaSE</option> <option va
el-select 实现多选和全选
sby_163的博客
04-20 1万+
实现效果： 打开页面时默认全选 代码： <template> <div> <el-form ref="form" label-width="80px" :model="test"> <el-row :gutter="20"> <el-col :span="6"> <el-form-item label="测试"> <el..
用angular实现多选按钮的全选与反选实例代码
12-11
在页面中我们常常会遇到多选框，例如购物车里的商品 下面用angular来实现这一...body ng-app="select" ng-controller="moreSel"> 全选: <input type="checkbox" ng-checked="checks" ng-click="checks = !check
全选反选取反
08-24
全选反选取反
js实现checkbox全选和反选示例
01-19
复选框全选示例 代码如下:<input type=”checkbox” name=”selectall” value=on onclick=”selectAll()”> function selectAll(form) { var obj = document.getElementsByName(‘selectall’); var cks = ...
解决JQuery全选/反选第二次失效的问题
11-27
最近在项目中，遇到一个问题，测试全选/反选功能时，第一次对母框进行选中/非选中时，能同步子框的全选/反选状态，之后再点击母框，子框就没反应了。 原代码大致结构关键如下： function selectAll(obj){ $('input...
el-select 下拉框多选实现全选的实现
12-12
下拉选项和【全选】都选上的时候，不勾选任意下拉选项，【全选】按钮就不勾选了； 上面就是我要实现的功能，我好啰嗦。。。还是看代码吧。。。 html部分： <el-select multiple collapse-tag
vue2---修饰符
最新发布
weixin_45503872的博客
04-24 732
此时有一个问题，如果我们设置了系统修饰符，并不希望有其他的按键组合，比如我们设置ctrl修饰符，此时如果按住ctrl和其他键，然后再点击鼠标，此时也会触发事件监听，所以我需要使用其他的修饰符来设置精确匹配事件。此时People的data返回的是一个对象，不是一个地址，每一个实例拿到的都是个独立，个体的对象，互相不会数据冲突，这个就是vue组件data为什么是函数的原因。data是一个函数，返回的是一个对象，目的是为了让每个组件数据隔离，这个是JavaScript的原理，并不是vue去设计的。
一个小时学习javaScript
weixin_43064364的博客
04-20 847
JavaScript 是一种广泛使用的编程语言，最初被设计来增加网页的交互性，让用户能够与网页上的元素进行互动。自从1995年被引入以来，JavaScript已经发展成为Web开发中不可或缺的一部分，并且其用途已经大大扩展到了网页之外。
Storage 工具如何封装(前缀、加密、过期时间等)及localStorage的基础介绍
qq_43641110的博客
04-18 1112
​​​​​​​。
JEECG表格选中状态怎么去掉
weixin_39031037的博客
04-19 483
官网代码（在取消选中状态的时候不生效）
vue3table全选和反选
05-30
对于 Vue3 Table 的全选和反选功能，你可以按照以下步骤实现： 1. 在表格组件中定义一个选中项的数组，例如：`selectedRows: []`。 2. 在表格中的每一行中添加一个复选框，并绑定一个 `v-model` 指令到该行对应数据的选中状态，例如：`<input type="checkbox" v-model="rowData.selected">`。 3. 在表头中添加一个全选复选框，并绑定一个 `v-model` 指令到一个 Boolean 类型的变量，例如：`<input type="checkbox" v-model="allSelected">`。 4. 在全选复选框的 `change` 事件中，将所有数据的选中状态设为全选复选框的选中状态，例如： ``` selectAll() { this.selectedRows = this.tableData.map(row => { row.selected = this.allSelected; return row; }); } ``` 5. 在选中项数组的 `watch` 中，计算已选中的项数，并更新全选复选框的选中状态，例如： ``` watch: { selectedRows() { const selectedCount = this.selectedRows.filter(row => row.selected).length; this.allSelected = selectedCount === this.tableData.length; } } ``` 6. 在表格中添加一个反选按钮，当点击该按钮时，将所有数据的选中状态取反，例如： ``` reverseSelect() { this.selectedRows = this.tableData.map(row => { row.selected = !row.selected; return row; }); } ``` 以上就是实现 Vue3 Table 全选和反选功能的基本步骤。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值