关键词：
实现思路：
1、 v-model 一个收集所有input（除全选框外）数组checkModel ，vue会动态将其checked为true的input的value值存入数组checkModel里
2 、watch函数来监听checkModel 属性，当其长度==input元素时 全选按钮选中 否则取消
3 、全选按钮v-model checked 属性来显示当前选中状态 click事件里 当checked为true时 全选 所有input按钮被选中也就是checkModel的遍历存入其value值
html代码：
<div>
<input type="checkbox" @click="checkAll" v-model="checked">
<span>全选</span>
</div>
<ul>
<li v-for="(item,index) in list" :key="index" style="margin-top:20px;">
<input type="checkbox" v-model="checkModel" :value="item.id">
<span>item.name--</span>
<span>item.age--</span>
<span>item.money元</span>
<mt-button @click="remove(index)" type="primary">删除</mt-button>
</li>
</ul>js代码：
data()
return
list:[
id:1,name:"明明",age:23,money:100,
id:2,name:"红红",age:18,money:200,
id:3,name:"强强",age:29,money:300
],
checked:false, //是否全选
checkModel:[] //双向数据绑定的数组，我是用的id
,
watch:
checkModel()
if(this.checkModel.length==this.list.length)
this.checked=true;
else
this.checked=false;
,
methods:
checkAll()
if(this.checked)
this.checkModel=[];
else
this.list.forEach((item)=>
if(this.checkModel.indexOf(item.id)==-1)
this.checkModel.push(item.id)
)
效果如图：
注：删除效果我用的是element-ui，有兴趣的朋友可以研究下
前端小demo——全选和全不选
模拟购物车，实现全选或者全不选，或者其中任意一件单品单选的效果。点击顶部复选框实现全选列表中任意一项未选中，顶部复选框就是未选中的状态<!DOCTYPEhtml><html><headlang="en"><metacharset="UTF-8"><title></t... 查看详情
js实现checkbox的全选和全不选功能
html代码：<formname="form1"method="post"action="manage.php?act=sub"><inputtype="checkbox"name="mm[]"value="<?=$row[‘0‘]?>"onClick="checkAll(this,‘mm‘)"><!--checkbox实现选择多条记录-->< 查看详情
多选框的全选和全不选(复制)
jQuery实现的全选、反选和不选功能本文给大家分享一段基于jQuery的全选、反选和不选功能的代码，适用于网页多选后需要进行批量操作的场景（如批量删除等）。文章结合实例，代码简洁，基本覆盖选项选择操作的方方面面，希... 查看详情
jquery案例二：实现全选全不选和反选(代码片段)
<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>全选和全不选以及反选</title><scriptsrc="../js/jquery-1.8.3.js"></script><script>$(function()//全选事件$(" 查看详情
react全选和全不选
状态：this.state={check:false,checks:false,}js:showInput=(e)=>{//全选和全不全console.log(e.target.checked);this.setState({check:e.target.checked,checks:e.target.checked,})}render()<Fragment><divsty 查看详情
jquerycheckbox的全选和全不选
刚学Jquery，在做checkbox的全选全不选时遇到了一个问题，使用attr()方法的话，只能成功全选和取消全选一次，第二次就不行了，如下面$("#chkAll").click(function(){if(this.checked==true){$("#tabinput[type=‘checkbox‘]").attr("checked",true);}else{$("#tabi... 查看详情
jquery学习——使用jq完成复选框的全选和全不选
...的复选框的选中状态设置成跟上面的一致！2、具体代码实现：1<!DOCTYPEhtml>2<html>3<head>4<metacharset="UTF-8">5<t 查看详情
26.jquery全选和全不选
<%@pagelanguage="java"contentType="text/html;charset=UTF-8"pageEncoding="UTF-8"%><!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><html> 查看详情
jq——选择器的应用（表格的隔行换色全选和全不选）(代码片段)
...数行分别设置不同的颜色。（2）效果展示： 2、全选和全不选：（1）核心代码：<script>$(function()$("#select").click(function()$("tbodyinput").attr("checked",this.checked);););</script>用到了选择器和对属性的设置，使得下面的复选... 查看详情
多选框checkbox全选全不选和反选
在判断多选框中的某一个是否被选中时，我们可以用checked的属性选中了就返回true，没被选中就返回false;这是html代码：<formaction="#"><labelfor="hobby">爱好：</label><labelfor="hobby1"><inputtype="checkbox"name="hobby"id="hobby1 查看详情
jquery版的全选，全不选和反选
<!DOCTYPEhtml><html> <head> <metacharset="UTF-8"> <scriptsrc="js/jquery.js"type="text/javascript"charset="utf-8"></script> <title></title> </head& 查看详情
django框架---jquery实现checkbox的单选和全选(代码片段)
jquery实现checkbox的单选和全选 一、思路全选：判断“全选”checkbox的状态，如果选中则把tbody下所有的checkbox选中,反之单选：主要是判断有没有全选，如果不是选中状态就把全选的checkbox状态设置为false,如果是选中就拿... 查看详情
jquery实现复选框全选全不选反选问题解析
今天打算用jQuery实现一下复选框的全选、全不选和反选问题，刚开始用的是attr("checked",true/false)方法，发现只能在最开始实现一次全选，可以实现全不选，无法实现反选，总之调试了好久死活得不到想要的效果。最后发现，j... 查看详情
jquery实现全选全不选(代码片段)
$(function()$("#all").click(function()$("input[name=‘bolls‘]").prop("checked",$("#all").is(":checked")?true:false););$("input[name=‘bolls‘]").click(function()vartotal=$("input[name=‘bolls‘]").length;varsize=$("input[name=‘bolls‘]:chec... 查看详情
hmtl页面中jquery实现复选框选择-全选-全不选-反选-提交(代码片段)
Hmtl页面中Jquery实现复选框选择-全选-全不选-反选-提交代码如下<!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><html><head><metahttp-equiv= 查看详情
datagridview表头添加全选/全不选选择框(代码片段)
...处以及作者网名，未经作者允许不得用于商业目的。实现datagridview表头添加全选/全不选选择框，而且当勾选改行复选框后选中该行，实现选中多行。1、由于虽然列可以设置为DataGridViewCheckBoxColumn，但是表头是没有... 查看详情
jquery_全选/全不选/反选_练习(代码片段)
jQuery_全选/全不选/反选_练习本文主要通过前端页面的复选框进行全选、全不选、反选的jQuery基础练习。从而逐渐掌握jQuery的常用方法等。结果：1、全选2、全不选3、反选4、点击提交，能够从弹窗中输出相应提交的每个数... 查看详情
案例：全选与全不选及反选(代码片段)
效果图如下:点击全选时会全部选中;全不选时全部不选;反选时反向选中.html结构代码:<inputclass=‘check‘type="checkbox"><inputclass=‘check‘type="checkbox"><inputclass=‘check‘type="checkbox"><inputclass=‘check‘type="checkb 查看详情