checkbox点击事件，在IE和谷歌浏览器显示不同的结果

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_36011279/article/details/88574274

html代码(vue.js)

<table class="table table-bordered">
                            <thead>
                                <tr>
                                    <th class="w55" th:text="#{ESE0120.th.No}"></th>
                                    <th class="w55">
                                        <input type="checkbox" v-model="check" @click="doCheck"/>
                                    </th>
                                    <th class="w110" th:text="#{ESE0120.th.date}"></th>
                                    <th class="w110" th:text="#{ESE0120.th.tokikbn}"></th>
                                    <th class="w200" th:text="#{ESE0120.th.ryouriName}"></th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr v-for="rec,index in list">
                                    <td class="w55">{{index+1}}</td>
                                    <td class="w55"><input type="checkbox" v-model="rec.check"/></td>
                                    <td class="w110">{{rec.kondateDate}}</td>
                                    <td class="w110">{{rec.tokiKbnName}}</td>
                                    <td class="w200 name" :title="rec.ryouriName">{{rec.ryouriName}}</td>
                                </tr>
                            </tbody>
                        </table> 

在ie浏览器中，点击全选框，触发点击事件，列表数据中的多选框与全选框的是否选中模式相同

但是在谷歌浏览器中，全选框的是否选中模式与列表中的多选框是否选中模式相反

发现

 在ie浏览器中，点击事件触发，获取的选中模式为点击后的选中模式，

 在谷歌浏览器中，点击事件触发，获取的选中模式为点击前的选中模式，

解决方案

将click事件更改为change事件