vue+jQuery实现全选，全不选，反选以及批量删除

最新推荐文章于 2024-06-13 14:06:36 发布
最新推荐文章于 2024-06-13 14:06:36 发布
阅读量513 收藏
点赞数
文章标签： jquery vue全选反选批量删除
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tanfei_/article/details/102843942
版权
本文介绍了在Vue项目中结合jQuery实现全选、全不选、反选和批量删除的功能。核心原理是根据按钮状态改变复选框状态，通过获取选中ID进行批量删除操作。在jQuery实现的全选反选中，点击时无法直接获取ID，需要额外处理。
摘要由CSDN通过智能技术生成

vue+jQuery实现全选，全不选，反选以及批量删除

做项目的时候经常会遇到全选，全不选，反选以及批量删除这些基本效果
那它们的原理是什么呢？？
全选，全不选，反选：原理就是获取他状态（checked=true/false）然后通过方法把所有的复选框的状态改变成按钮的状态，反选就是把复选框的状态改变成改变成按钮的相反状态

$(function(){
   
	$("#butt").click(function(){
   
		$("input[name='nid']:checkbox").prop("checked",true);
	});
	$("#buttNo").click(function(){
   
		$("input[name='nid']:checkbox").prop("checked",false);
	});
	$("#fan").click(function(){
   
		$("input[name='nid']").each(function(){
   
			this.checked=!this.checked
最低0.47元/天 解锁文章
tanfei_
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue 全选-全不选-反选 demo
zmtlwzy的博客
11-22 190
Vue 全选-全不选-反选 demo直接上代码 直接上代码 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initia...
JQuery操作全选与全不选,批量进行删除
小小的心,有大大的梦的博客
04-18 702
引入jquery.js的插件 编写html 此处要注意,html中的id不能重复,所以在单选的input中用class 来做标记 编写JQ: //通过事件来改变选中值 $(function () { $(’#allCheck’).click(function () { $(’.check’).prop(‘checked’,this.checked); }) }) ...
vue实现全选、反选功能
08-30
主要为大家详细介绍了vue实现全选、反选功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue&jquery的全选反选，完成批量删除
世 间 尤 物，不 敢 妄 取
11-03 268
之前我用的vue批量删除，点击全选按钮不能获取到id，只能点击多个才可以获取到id，现在此方法可以点击全选获取所有id，并可以实现反选. vue中定义好两个数组arrin，brr就ok了。 //brr是存储批量删除的id数组 //arrin.nid是查询出id <input type="checkbox" name="id" v-model="brr" :value="arr.nid"&gt...
如何基于Vue实现批量删除
最新发布
weixin_57237364的博客
06-13 344
这一步需要注意你的<el-table>属性里是否添加了ref，例如。1.第一步我们需要添加一个批量删除的按钮，并且底色为红色。type设置了危险样式(红色，一般是删除)。2.第二步我们需要根据自己的表单添加复选框。@click代表点击按钮后使用的方法。3.第三步就是编写点击按钮后使用的方法。这一步是保证我们可以拿到选中的行。
jquery全选-全不选，删除，批删
马冠亚的博客
12-15 365
全选和全不选 $(document).on('click','#quan',function(){ var name_va = $(this).prop('name');//获取标签的name值 if(name_va == '全选'){ $("input[type='checkbox']").each(function(i,v) $...
jquery全选反选全不选案例
04-04
"jquery全选反选全不选案例" 是一个常见的交互功能，常见于表格或者列表中，允许用户一键选择或取消所有选项。这个功能在数据筛选、批量操作等场景下非常实用。 实现这一功能的关键在于理解 jQuery 中的选择器和...
Js实现复选框的全选、全不选反选功能代码实例
10-15
在网页开发中，经常需要实现复选框（checkbox）的全选、全不选以及反选功能，以便用户能够方便地批量操作。本篇将详细讲解如何使用JavaScript（Js）实现这一功能，并提供一个具体的代码实例。 首先，我们需要了解复...
jQuery全选
07-28
"jQuery全选"这个主题，就是关于如何使用jQuery实现表格或其他列表元素的全选和反选功能。下面，我们将深入探讨这一知识点，包括相关原理、代码实现以及实际应用。 一、jQuery全选的基本概念 在网页交互中，用户...
复选框的全选和反选、复选框的全选和反选
12-29
例如，用户可能需要批量删除或更新一组记录。在这种情况下，服务器端需要处理全选请求，获取所有选中项的ID，并执行相应的数据库操作。 此外，全选和反选功能还涉及到性能优化。当选项数量非常大时，一次性操作所有...
vue 全选与反选的实现方法(无Bug 新手看过来)
12-29
我就废话不多说，直接上代码吧！ &lt;!DOCTYPE html> &lt;html lang=en&gt; &lt;head&gt; &lt;meta charset=UTF-8&gt; &lt;title&gt;Document&lt;/title&gt; &lt;/head&gt; &lt;body&gt; <div id=app> <div xss=removed> <ul xss=removed> <li v-for=(item,> &lt;input type=checkbox :value=index v-model=selectArr&gt;{{it
jQuery全选全不选&删除&批量删除
weixin_46981685的博客
04-13 259
jQuery全选全不选&删除&批量删除 1.全选全不选 2.删除 Controller层 Mapper
jquery 全选 全不选 批量删除
闫瑞祥的博客
09-11 568
jquery 实现全选反选批量删除 全选全不选按钮然后点击批量删除 < th >全选 < input type=“checkbox” id=“theadInp” />< /th > <input name=“ids” class=“ids” type=“checkbox” value="{{$v.id}}" / > $(function() { //实现全选反选 $("#theadInp").on('click', function
简单使用JQ代码 实现全选 反选 全不选 批删
这些年来
01-03 762
选择         ID         NAME         SEX         AGE         TEL         操作         查看             $val):?>             " class="c_box">                                      
Vue实现全选、反选、全不选功能
功能总结
03-03 5322
Vue实现全选、反选、全不选功能
vue全选和反选
钱辉
11-18 1012
注释为反选 <div class="checkbox"> <input type="checkbox" v-model="checkout" @click="handleClick" >全选 <ul> <li v...
Vue checkbox全选反选
reg183的专栏
03-22 597
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>vue学习 语法demo1</title> ...
Vue 2.0 全选，反选，全不选（二）
香蕉你个芭呐呐的博客
04-19 505
基于Vue 2.0的全选
vue+多层双层全选
12-08
针对您的问题，以下是关于Vue多层双向绑定和全选的介绍和演示： 在Vue中实现多层双向绑定和全选需要以下几个步骤： 1. 在data中定义需要绑定的数据，例如： ```javascript data() { return { // 定义需要绑定的数据 list: [ { id: 1, name: '商品1', checked: false, children: [ { id: 11, name: '子商品1', checked: false }, { id: 12, name: '子商品2', checked: false } ] }, { id: 2, name: '商品2', checked: false, children: [ { id: 21, name: '子商品3', checked: false }, { id: 22, name: '子商品4', checked: false } ] } ], // 全选状态 allChecked: false } } ``` 2. 在模板中使用v-model指令实现双向绑定，例如： ```html <div v-for="(item, index) in list" :key="index"> <label> <input type="checkbox" v-model="item.checked" @change="checkParent(index)"> {{ item.name }} </label> <div v-for="(child, childIndex) in item.children" :key="childIndex"> <label> <input type="checkbox" v-model="child.checked" @change="checkChild(index)"> {{ child.name }} </label> </div> </div> <label> <input type="checkbox" v-model="allChecked" @change="checkAll"> 全选 </label> ``` 3. 实现全选功能，例如： ```javascript methods: { // 点击全选按钮 checkAll() { // 遍历所有商品和子商品，将其checked状态改为全选状态 this.list.forEach(item => { item.checked = this.allChecked item.children.forEach(child => { child.checked = this.allChecked }) }) }, // 点击商品复选框 checkParent(index) { // 判断是否所有商品都被选中 let allChecked = true this.list.forEach(item => { if (!item.checked) { allChecked = false } }) // 更新全选状态 this.allChecked = allChecked }, // 点击子商品复选框 checkChild(parentIndex) { // 判断是否所有子商品都被选中 let allChecked = true this.list[parentIndex].children.forEach(child => { if (!child.checked) { allChecked = false } }) // 更新商品和全选状态 this.list[parentIndex].checked = allChecked this.checkParent(parentIndex) } } ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值