Vue实现全选全不选功能

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

注意：script里面的vue.js的引用文件最好自己找个线上的

<!doctype html>
<html>
    <head>
        <title>Check uncheck all Checkboxes with Vue.js</title>
        <script src="vue.js"></script>
    </head>
    <body>
                
        <div id='myapp'>
            
            <!-- Check All -->
            <input type='checkbox' @click='checkAll()' v-model='isCheckAll'> Check All

            <!-- Checkboxes list -->
            <ul>
                <li v-for='lang in langsdata'>
                    <input type='checkbox' v-bind:value='lang' v-model='languages' @change='updateCheckall()'>{{ lang }}
                </li>
            </ul>

            <!-- Print -->
            <input type='button' @click='printValues()' value='Print Selected Values'>

            <br>
            Selected items : {{ selectedlang }}

        </div>

        <!-- Script -->
        <script>
            var app = new Vue({
                el: '#myapp',
                data: {
                    isCheckAll: false,
                    langsdata: ["PHP","Vue.js","AngularJS","jQuery","JavaScript"],
                    languages: [],
                    selectedlang: ""
                },
                methods: {
                    checkAll: function(){

                        this.isCheckAll = !this.isCheckAll;
                        this.languages = [];
                        if(this.isCheckAll){    // Check all
                            for (var key in this.langsdata) {
                                this.languages.push(this.langsdata[key]);
                            }
                        }

                    },
                    updateCheckall: function(){
                        if(this.languages.length == this.langsdata.length){
                            this.isCheckAll = true;
                        }else{
                            this.isCheckAll = false;
                        }
                    },
                    printValues: function(){
                        this.selectedlang = "";
                        // Read Checked checkboxes value
                        for (var key in this.languages) {
                            this.selectedlang += this.languages[key]+", ";  
                        }
                    }
                }
            })

        </script>
    </body>
</html>

 

posted @ 2022-10-25 16:21  漫漫长路</>  阅读(176)  评论(0)    收藏  举报