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> 

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

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

發現

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

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

解決方案

將click事件更改為change事件

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

版權聲明：本文為CSDN博主「程序猿_小鄭」的原創文章，遵循CC 4.0 BY-SA版權協議，轉載請附上原文出處鏈接及本聲明。

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