vue.js实现checkbox的全选和反选

摘要:

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. 是不是觉得超级简单。

时间: 2024-10-12 13:23:45

vue.js实现checkbox的全选和反选的相关文章

使用vue.js实现checkbox的全选和多个的删除功能

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 <script> var proData = [{   "name": "j1ax" }, {   "name": "j2ax&

js中checkbox的全选和反选的实现

<head> <meta charset="utf-8"/> <script type="text/javascript"> window.onload=function(){ document.getElementById("unall").onclick=function(){ var hobbys= document.getElementsByName("hobby"); for(va

纯js实现checkbox的全选、反选、全不选

分开:a. 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <input type="checkbox" id="check_all">全选 <inpu

JS 控制checkbox 获取 全选 全不选 一行不选择全选则不被选择 全部选择全选被选择

</pre><pre name="code" class="javascript"><span style="font-size:18px;">//点击全选按钮的事件操作 function selectAll(){ var allcheckBoxs=document.getElementsByName("iTo"); var select=document.getElementsByName

checkbox的全选、反选、多选等操作(js)

以下控件的name属性为DEPT_ID (案例中默认选中的checkbox,全选或者反选,对该控件无影响)//1.全选 function selectAllRight(){ $("input[name='DEPT_ID'").each(function() { $(this).prop("checked", true); }); } //2.反选 function reverseSelectRight(){     $("input[name='DEPT_

通过VBA实现checkbox的全选和反选

checkbox的全选和反选可以通过VBA来控制,这种设计常见于一些交互式报表,代码如下: 1.分成两个IF判断 Private Sub CheckBox1_Click()  ‘checkbox为总控,通过点击它来实现全选或反选 Dim b3 As Integer Dim i As Integer Dim b1 As Range If Sheets(1).CheckBox1.Value Then  ’第一个IF判断为全选的条件时     b3 = Sheets(1).Range("h50&quo

Bootstrap开源包中checkbox的全选和反选

不知为何以前js写的全选和反选功能都不能用了,经过Chrome浏览器控制台查看后,发现并不是不起作用,只是样式没有变化而已.首先先刚放上html代码,省略了别的代码,只含有checkbox: <!-- lang: html -->     <label class="checkbox">         <input class="states" type="checkbox" name="ids"

asp.net中Repeater结合js实现checkbox的全选/全不选

前台界面代码: <input name="CheckAll" type="checkbox" id="CheckAll" value="" onclick="javascript:FormSelectAll('form1','cboxi','CheckAll',this);" /> //用于选择是否全选的复选框,用javascript函数"FormSelectAll('form1','

js实现checkbox的全选和全不选功能

html代码: <form name="form1" method="post" action="manage.php?act=sub"> <input type="checkbox" name="mm[]" value="<?=$row['0']?>" onClick="checkAll(this, 'mm')"> <!--