本文探討了在Vue.js應(yīng)用中使用checkbox時遇到的瀏覽器兼容性問題。在IE瀏覽器中，點擊全選框能正確同步列表數(shù)據(jù)的選中狀態(tài)，而在谷歌瀏覽器中，全選操作導(dǎo)致的選中狀態(tài)相反。原因在于IE和Chrome對于點擊事件（click）觸發(fā)時獲取的選中狀態(tài)不同。為解決這個問題，建議將事件監(jiān)聽器從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> 

在ie瀏覽器中，點擊全選框，觸發(fā)點擊事件，列表數(shù)據(jù)中的多選框與全選框的是否選中模式相同

但是在谷歌瀏覽器中，全選框的是否選中模式與列表中的多選框是否選中模式相反

發(fā)現(xiàn)

 在ie瀏覽器中，點擊事件觸發(fā)，獲取的選中模式為點擊后的選中模式，

 在谷歌瀏覽器中，點擊事件觸發(fā)，獲取的選中模式為點擊前的選中模式，

解決方案

將click事件更改為change事件

————————————————

版權(quán)聲明：本文為CSDN博主「程序猿_小鄭」的原創(chuàng)文章，遵循CC 4.0 BY-SA版權(quán)協(xié)議，轉(zhuǎn)載請附上原文出處鏈接及本聲明。

原文鏈接：https://blog.csdn.net/qq_36011279/article/details/88574274