VUE 全选

朱雀 2023-06-11 12:28 22阅读 0赞

<div id="vue_det">
        <p>全选:</p>
        <input type="checkbox" id="checkbox" v-model="checked" @change="changAllChecked"/>
        <label for="checkbox">
            {
       {checked}}
        </label>
    
        <p>多个复选框</p>
        <input type="checkbox" id="r1" value="r1" v-model="checkedNames"/>
        <label for="r1">r1</label>
        <input type="checkbox" id="r2" value="r2" v-model="checkedNames"/>
        <label for="r2">r2</label>
        <input type="checkbox" id="r3" value="r3" v-model="checkedNames"/>
        <label for="r3">r3</label>
        <input type="checkbox" id="r4" value="r4" v-model="checkedNames"/>
        <label for="r4">r4</label>
        <input type="checkbox" id="r5" value="r5" v-model="checkedNames"/>
        <label for="r5">r5</label>
    
        <span>选择的值为：{
       {checkedNames}}</span>
    </div>
    <script type="text/javascript">
        var vm = new Vue({
       
            el:'#vue_det',
            data:{
       
                checked:false,
                checkedNames:[],
                checkedArr:['r1','r2','r3','r4','r5']
            },
            methods:{
       
                changAllChecked:function(){
       
                    if(this.checked){
       
                        this.checkedNames = this.checkedArr
                    }else{
       
                        this.checkedNames=[]
                    }
                }
            }
        });
    </script>

更多专业前端知识，请上 **【猿2048】www.mk2048.com**

发表评论取消回复

表情：

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

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

相关阅读

相关 JavaScript实现全选、反选功能（Vue全选、反选，js原生全选、反选）

首先为复选框添加了一个事件监听器，当用户点击该复选框时，将触发该事件；然后在事件处理函数中，通过遍历所有复选框，将它们的选中状态设置为与复选框相同的状态。

缺乏、安全感/ 2024年04月22日 22:30/ 0 赞/ 115 阅读

相关 VUE 全选

<div id="vue_det"> <p>全选:</p> <input type="checkbox" id="checkbox" v

朱雀/ 2023年06月11日 12:28/ 0 赞/ 23 阅读

相关 vue2.0 实现全选和全不选

vue2.0 实现全选和全不选实现思路： 1、 v-model 一个收集所有input（除全选框外）数组checkModel ，vue会动态将其checked为t

r囧r小猫/ 2023年02月22日 05:22/ 0 赞/ 37 阅读

相关 vue 分页记忆勾选数据全选为单页面全选

目录直接复制粘贴（记得把子组件引用上）表格组件页面内容数据全选分页清空页面内容数据全选分页仍然保留 --------------------

绝地灬酷狼/ 2022年09月04日 06:41/ 0 赞/ 289 阅读

相关 vue tree全选

trre代码 <div class="checkedBox"> <el-checkbox v-model="checkAll" @ch

柔光的暖阳◎/ 2022年09月02日 04:26/ 0 赞/ 163 阅读

相关全选取消全选

这里用到AngularJS四大特性之二----双向数据绑定注意：没写一行DOM代码！这就是ng的优点，bootstrap.css为了布局，JS代码也只是简单创建ng模块和n

爱被打了一巴掌/ 2022年06月04日 07:55/ 0 赞/ 300 阅读

相关 VUE：checkbox 单选框（单选、多选）、一选全选 / 全选一选、表格单选列实现

[前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。点击跳转到教程。][Link 1] 1. 效果：如红框中部分。一选全选：表头上的单选框

怼烎@/ 2022年03月28日 10:50/ 0 赞/ 1045 阅读

相关全选-反选-全不选

简单易懂，上手快 $(function() \{ //全选 $("\all").click(function()

绝地灬酷狼/ 2021年10月03日 02:48/ 0 赞/ 578 阅读

相关 vue.js单选全选删除

index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>

我不是女神ヾ/ 2021年06月26日 16:06/ 0 赞/ 497 阅读

相关 vue实现全选、全不选和部分选择功能

在开发项目的过程当中，特别是开发后台管理系统时，会有很多的数据等待管理员去统一管理，所以有时候还需要将一些数据导出，然后打印，这是很有必要的，因为数据可以帮助分析这个产品是否具

Dear 丶/ 2021年06月11日 15:12/ 0 赞/ 520 阅读