checkbox点击事件，在IE和谷歌浏览器显示不同的结果_谷歌浏览器中复选框实际是选中但是状态不一样-优快云博客

本文探讨了在Vue.js应用中使用checkbox时遇到的浏览器兼容性问题。在IE浏览器中，点击全选框能正确同步列表数据的选中状态，而在谷歌浏览器中，全选操作导致的选中状态相反。原因在于IE和Chrome对于点击事件（click）触发时获取的选中状态不同。为解决这个问题，建议将事件监听器从click改为change，以确保在所有浏览器中行为一致。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>