vue.js - vuejs checkbox用v-model绑定一个bool变量，在js中可以控制这个bool变量来控制checkbox的状态吗

问题描述

问 题

我想实现一个全选checkbox和一些子checkbox，如下：

代码如下：

html：

    <div>
        <input type='checkbox' id='checkedAllBox' v-model="checkedAll" style="zoom:180%" v-on:click='setAllChecked' />全选
        <template v-for="testData of testDatas">
            <input  type="checkbox" style="zoom:180%;" :id="testData.id" :value="testData.id" v-model="checkedIDs"  @click.native="setChecked($index)">
            <label :for="testData.id">{{testData.name}}</label>
        </template>
        <br>
        <span>checkedAll: {{ checkedAll }}</span>
        <span>Checked IDs: {{ checkedIDs }}</span>
    </div>    

js：

export default {
    name: 'lolololo',
    data() {
        return {
            checkedAll: false,
            msg: '',
            checkedIDs: [],
            testDatas: [
                {
                "id": 1,
                "name": "lalala"
                },
                {
                "id": 2,
                "name": "hahaha"
                },
                {
                "id": 3,
                "name": "huhuhu"
                },
                {
                "id": 4,
                "name": "lelele"
                }
            ]
        }
    },
    mounted: function() {
    },
    methods: {
          setChecked: function(index) {
              this.checkedAll = false;//////感觉这一句没有起作用
              
            this.checkedIDs.pop(this.testData[index].id);
          },
          setAllChecked: function() {
              this.checkedAll = !this.checkedAll;

              if(this.checkedIDs.length >= this.testDatas.length)
              {
                  this.checkedIDs = [];
              }
              else
              {
                  for (var i = this.testDatas.length - 1; i >= 0; i--) {
                      if(-1 == this.checkedIDs.indexOf(this.testDatas[i].id))
                      {
                          this.checkedIDs.push(this.testDatas[i].id)
                      }
                  }
              }
          }
    }
}

这样可以实现全选和取消全选，并把选中的选项的id放到checkedIDs数组中，如下：

现在问题是全选可以选，但是取消其中一个，全选框不能同时取消选择，出现下面的情况：

主要是因为关联的那个bool变量checkedAll没有变为false，上面代码中的那句后面加注释的没有起作用，在js中不能控制用v-model绑定过的变量吗，求解

解决方案

给你一个全选的例子

    <div id="app">
        <ol>
            <li>
                <span><input type="checkbox" v-model="selectAll"></th></span>
                <span align="left">全选</span>
            </li>
            <li v-for="answer in answers">
                <span>
                    <input type="checkbox" v-model="selected" :value="answer.id" >
                </span>
                <span>{{ answer.name }}</span>
            </li>
        </ol>
    </div>
    <script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.0.5/vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                answers: [ 
                    { "id": 1, "name": "A" },
                    { "id": 2, "name": "B" }, 
                    { "id": 3, "name": "C" }, 
                    { "id": 4, "name": "D" }
                ],
                selected: []
            },
            computed: {
                selectAll: {
                    get: function () {
                        return this.answers ? this.selected.length == this.answers.length : false;
                    },
                    set: function (value) {
                        var selected = [];

                        if (value) {
                            this.answers.forEach(function (user) {
                                selected.push(user.id);
                            });
                        }

                        this.selected = selected;
                    }
                }
            }
        });
    </script>

效果图，你实现的checkedId没显示出来而已，根据实际情况修改一下即可

这篇关于vue.js - vuejs checkbox用v-model绑定一个bool变量，在js中可以控制这个bool变量来控制checkbox的状态吗的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！