JS_every方法使用，一句代码实现全选功能

Bertha 。 2022-11-04 15:22 171阅读 0赞

# 定义和用法 #

every() 方法用于检测数组所有元素是否都符合指定条件（通过函数提供）。  
every() 方法使用指定函数检测数组中的所有元素：

如果数组中检测到有一个元素不满足，则整个表达式返回 false ，且剩余的元素不会再进行检测。如果所有元素都满足条件，则返回 true。

*  注意： every() 不会对空数组进行检测。
 *  注意： every() 不会改变原始数组。

this.checkAll = this.list.every(item=>item.check);

示例：  
![在这里插入图片描述][20210303115523644.png]

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Vue</title>
        <script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script>
    </head>
    
    <body>
        <div id="app">
            <input type="checkbox" v-model="checkAll" @change="checkAllChange">全选
            <div v-for="(item,i) in list">
                <input type="checkbox" v-model="item.check" @change="checkChange">选择项{
       {item.id}}</br>
            </div>
        </div>
    
        <script> var vm = new Vue({ el: '#app', data: { checkAll:false, list:[ { id:1, check:false }, { id:2, check:true }, { id:3, check:false }, ], }, methods: { checkAllChange(){ this.list.forEach(item=>{ item.check = this.checkAll}); }, checkChange(){ this.checkAll = this.list.every(item=>item.check); } } }); </script>
    </body>
    
    </html>

[20210303115523644.png]: /images/20221023/7c573fdc8123400a9bee7483d2f5bc6e.png

发表评论取消回复

表情：

评论列表（有 0 条评论，171人围观）

还没有评论，来说两句吧...

相关阅读

相关 jQuery实现全选反选功能

用jQuery实现全选反选功能要求要求1：点击全选的checkbox，让下面所有人名前的checkbox的选中状态和全选的一致要求2：点击反选按钮，所有人名

迷南。/ 2023年06月25日 06:05/ 0 赞/ 4 阅读

相关全选，全不选功能

需求： 1.点击全选，子项全部选中，再次点击，则全部不选中。 2.选中全部子项，全选选中，没有选中则不选中全选按钮。前端部分：调

末蓝、/ 2022年11月17日 05:09/ 0 赞/ 242 阅读

相关 JS_every方法使用，一句代码实现全选功能

定义和用法 every() 方法用于检测数组所有元素是否都符合指定条件（通过函数提供）。 every() 方法使用指定函数检测数组中的所有元素：如果数组中检测到有

Bertha 。/ 2022年11月04日 15:22/ 0 赞/ 172 阅读

相关 jQurey全选，反选，不全选功能实现

html部分 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>全选，反选，不全选</t

╰+哭是因爲堅強的太久メ/ 2022年08月21日 10:53/ 0 赞/ 245 阅读

相关 JQuery实现全选、全不选和反选功能

项目中需要做一个全选、全不选和反选的功能。刚接到这个需求的时候，心想很简单的一个功能，几行代码就能搞定，然而事实并非如此。下面就把我的思路说一下：

旧城等待，/ 2022年07月14日 14:09/ 0 赞/ 317 阅读

相关 icheck结合datatable使用方法及实现全选、反选功能

icheck结合datatable使用方法及实现全选、反选功能 -------------------- 一、icheck使用方法 1.引入必要文件（皮肤的cs

水深无声/ 2022年06月11日 07:37/ 0 赞/ 120 阅读

相关 Jquery 实现全选全不选功能

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>attr</title>

ゞ浴缸里的玫瑰/ 2022年06月05日 00:16/ 0 赞/ 287 阅读

相关 javascript实现全选，反选功能

今天看项目发现有全选和反选的按钮实现，比较感兴趣，从网上搜索了自己实现了一下实现的方式就是在我们的按钮中设置响应的事件，然后在我们的函数中，通过定义的多选按钮的na

淡淡的烟草味﹌/ 2022年05月17日 10:48/ 0 赞/ 240 阅读

相关 JavaScript实现全选、反选、不选功能

实现代码： <!DOCTYPE html> <html> <meta charset='utf-8' /> <body> <input

叁歲伎倆/ 2022年02月15日 08:06/ 0 赞/ 302 阅读

相关 jQuery中实现全选，全不选功能

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></t

蔚落/ 2021年09月18日 23:04/ 0 赞/ 397 阅读