关键词：
摘要：
1、监听全选的值的变化，来改变checbox的数组值
2、监听选中checkbox的数组值的变化，当某一项checkbox有变化，判断是否checkbox的数值长度是否和列表数据的长度一致，来改变全选的值。
下面来一起看看是怎么实现的吧：
一、HTML
<template>
<table class="table table-bordered table-hover text-center" id="tabletList">
<thead>
<tr>
<th class="bgColor" width="25px"></th>
<th class="bgColor">获奖时间</th>
<th class="bgColor">用户ID</th>
<th class="bgColor">用户电话号码</th>
<th class="bgColor">奖品</th>
<th class="bgColor">用户地址</th>
<th class="bgColor">用户姓名</th>
<th class="bgColor">状态</th>
<th class="bgColor">编辑</th>
</tr>
</thead>
<tbody>
<tr v-for="(x, index) in list">
<td><input type="checkbox" class="checkBox" v-model="x.checked" @change="selectSingle(index, x.userId)"></td>
<td v-text="x.createTime"></td>
<td v-text="x.userId"></td>
<td class="uerPhone" v-text="x.phone"></td>
<td class="awardStatus">
<img :src="x.goodsImg">
<p v-text="x.goodsName"></p>
</td>
<td class="address" v-text="x.address"></td>
<td class="userName" v-text="x.name"></td>
<td class="userAward" v-text="x.awardStatusStr"></td>
<td><a href="javascript:;" @click="modify(index)" class="curEdit">修改</a></td>
</tr>
</tbody>
</table>
二、js
export default {
data() {
checked: [],
allChecked:null,
checkedCount:0,
list: [],//后台传过来的json数据
total:{
num: 0,
page: 0
},
},
methods: {
selectSingle(index, id) {//单选个input点击事件
console.log(index)
console.log(this.list[index].checked)
// this.list[index].checked ^= 1
this.list.forEach((item, i) => {
if (item.userId === id && i !== index) {
item.checked = this.list[index].checked
this.$set(this.list, i, item)
}
})
if (this.list[index].checked === true) {
this.checkedCount ++
}
},
selectAll(event) {//全选
this.list.forEach((item, i)=> {
if(item.checked === true){
item.checked = i.checked
}
item.checked ^= 1
this.$set(this.list, i, item)
})
if (this.allChecked == true) {
this.checkedCount = this.total.num
}else{
this.checkedCount = 0
}
},
}
}
That‘s all. 是不是觉得超级简单。
vue中的全选和反选
<template><div><inputtype=‘checkbox‘class=‘input-checkbox‘v-model=‘checked‘v-on:click=‘checkedAll‘>全选<templatev-for=‘checkbincheckboxData‘><inputtype=‘checkbox‘name=‘checkbo 查看详情
js实现复选框的全选全部选和反选
1<!DOCTYPEhtml>2<htmllang="en">3<head>4<metacharset="UTF-8">5<title>checkbox</title>6<styletype="text/css">7.main{8width:400px;9height:400px;10margin:20pxauto 查看详情
原生js实现全选和反选以及任意一个未被选中的效果
模仿一个百度音乐的全选和反选的的操作。html代码如下：<divclass="box"><ulid="lists"><li><inputtype="checkbox"value=""><span>我爱你中国</span></li><li><inputtype="checkbox"value=""& 查看详情
jsreact全选和反选
onCheckAll=(data)=>{ varCheckBox=document.getElementsByName(data); for(leti=0;i<CheckBox.length;i++){if(CheckBox[i].checked==true){CheckBox[i].checked=false;}else{CheckBox[i].checked=true}}; } 查看详情
checkbox之全选和反选
先导入jquery组件<inputtype="checkbox"id="checkall">全选<inputtype="checkbox"id="checkrev">反选<inputtype="checkbox"name="check1">1<inputtype="checkbox"name="check1">2<script>$(fun 查看详情
angularjs全选功能实现
...，之前只做过JQ版的全选和反选。实现效果：1.点击全选checkbox可以切换全选和全部清空2.点击列表中的checkbox，当全部选中时全选选中3.在全选状态下点击列表中的checkbox将其置为非选中状态时全选checkbox也变为非选中状态一开始... 查看详情
vue实现单选、全选和反选
参考技术A当多个checkbox通过v-model绑定到同一个数组时，每个checkbox被选中时，它的value会被添加到这个数组。全选框通过v-model绑定到一个计算属性(checkAll)，这个属性必须实现了getter和setter方法，当model数组长度等于fruits长度，返... 查看详情
jquery版的全选，全不选和反选
<!DOCTYPEhtml><html> <head> <metacharset="UTF-8"> <scriptsrc="js/jquery.js"type="text/javascript"charset="utf-8"></script> <title></title> </head& 查看详情
js如何实现对name是数组的复选框的全选和反选以及取消选择？form内容如下：
...me="form1"action=""><label><inputtype='checkbox'name='ptpt[1]'value='a1'/>a1</label><label><inputtype='checkbox'name='ptpt[3]'value='a3'/>a3</label><label><inputtype='checkbox'... 查看详情
使用vue.js实现checkbox的全选和多个的删除功能
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253<script>varproData=[{ "name":"j1ax"},{ "name":"j2ax"},{ "name":" 查看详情
jquery实现全选和反选功能
...中选项的值。<ulid="list"><li><label><inputtype="checkbox"value="1">1.我是记录来的呢</la 查看详情
多选框checkbox全选全不选和反选
在判断多选框中的某一个是否被选中时，我们可以用checked的属性选中了就返回true，没被选中就返回false;这是html代码：<formaction="#"><labelfor="hobby">爱好：</label><labelfor="hobby1"><inputtype="checkbox"name="hobby"id="hobby1 查看详情
delphi实现dbgrid全选和反选功能
Delphi实现Dbgrid全选和反选、清除全选的功能，不管是在Delphi下，还是在WEB开发中，这种功能都是很实用的，是进行数据批量操作的基础。本模块就是实现了为Delphi的DBGrid数据列表增加全选内容、清除全选的功能，很实用... 查看详情
项目中全选和反选
<scripttype="text/javascript"> //页面加载 //获取onclick对象，并绑定onclick时间 //将所有的checkbox打钩 window.onload=function(){ //获取name的值等于anniu的元素 alert(1); varinput_obj=document.getElementsByName("anniu"); / 查看详情
jquery实现的全选反选和不选功能
...排操作按钮。<ulid="list"><li><label><inputtype="checkbox"value="1">1.时间都去哪儿了</label></li><li><label><inputt 查看详情
实现全选和反选的效果代码
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>全选</title><style>#allinspan{display:inline-block;width:150px;margin-top:10px;font-size:18px;tex 查看详情
jquery案例二：实现全选全不选和反选(代码片段)
<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>全选和全不选以及反选</title><scriptsrc="../js/jquery-1.8.3.js"></script><script>$(function()//全选事件$(" 查看详情
全选和反选
//--------------主布局文件----------------------------<RelativeLayoutxmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" 查看详情