實(shí)現(xiàn)checkbox全選、反選、取消JavaScript小腳本異常
更新時(shí)間：2014年04月10日 15:41:05 作者：
實(shí)現(xiàn)checkbox全選，反選，取消JavaScript小腳本的時(shí)出現(xiàn)點(diǎn)小異常，大家可以看看，以后就不要犯這個(gè)特別2的錯(cuò)誤了
今天在實(shí)現(xiàn)checkbox全選，反選，取消JavaScript小腳本的時(shí)候，總是出現(xiàn)點(diǎn)擊后頁(yè)面瞬間刷新，選擇的checkbox全部取消的問(wèn)題，debug了半天，才發(fā)現(xiàn)原來(lái)是<button>標(biāo)簽中少寫(xiě)了一個(gè)type屬性的原因，郁悶啊，希望自己以后少犯這種特別2的錯(cuò)誤，特此記錄。
<!-- 以下為錯(cuò)誤寫(xiě)法 -->
<button name="checkAll" value="全選" class="checkButton" onClick="checkAll(form_favor,status)">全選</button>
<!-- 正確寫(xiě)法 -->
<button name="checkAll" type="button" value="全選" class="checkButton" onClick="checkAll(form_favor,status)">全選</button>
看了w3c的描述，瞬間明白了，在沒(méi)寫(xiě)type屬性的情況下，當(dāng)時(shí)瀏覽器默認(rèn)將它當(dāng)submit處理了，而我表單接受處理的腳本還是空著的，所以就產(chǎn)生了“刷新”的現(xiàn)象！
復(fù)制代碼 代碼如下:
<!-- 以下為錯(cuò)誤寫(xiě)法 -->
<button name="checkAll" value="全選" class="checkButton" onClick="checkAll(form_favor,status)">全選</button>
復(fù)制代碼 代碼如下:
<!-- 正確寫(xiě)法 -->
<button name="checkAll" type="button" value="全選" class="checkButton" onClick="checkAll(form_favor,status)">全選</button>
看了w3c的描述，瞬間明白了，在沒(méi)寫(xiě)type屬性的情況下，當(dāng)時(shí)瀏覽器默認(rèn)將它當(dāng)submit處理了，而我表單接受處理的腳本還是空著的，所以就產(chǎn)生了“刷新”的現(xiàn)象！
您可能感興趣的文章:
- 利用Vue.js實(shí)現(xiàn)checkbox的全選反選效果
- javascript實(shí)現(xiàn)checkBox的全選，反選與賦值
- js實(shí)現(xiàn)checkbox全選、不選與反選的方法
- 兩種不同的方法實(shí)現(xiàn)js對(duì)checkbox進(jìn)行全選和反選
- js實(shí)現(xiàn)checkbox全選和反選示例
- jquery、js操作checkbox全選反選
- js操作CheckBoxList實(shí)現(xiàn)全選/反選(在客服端完成)
- Jquery CheckBox全選方法代碼附j(luò)s checkbox全選反選代碼
- javaScript checkbox 全選/反選及批量刪除
- javascript checkbox全選和反選的簡(jiǎn)單實(shí)現(xiàn)
相關(guān)文章
javascript實(shí)現(xiàn)劃詞標(biāo)記+劃詞搜索功能
javascript實(shí)現(xiàn)劃詞標(biāo)記+劃詞搜索功能...2007-03-03
JavaScript 在各個(gè)瀏覽器中執(zhí)行的耐性
經(jīng)常會(huì)遇到這樣一個(gè)情況：瀏覽器彈出對(duì)話框，提示腳本運(yùn)行時(shí)間過(guò)長(zhǎng)，詢問(wèn)“停止”還是“繼續(xù)”。那究竟各個(gè)瀏覽器是如何判斷在什么時(shí)候才彈出此對(duì)話框呢？2009-04-04
js 自制滾動(dòng)條的小例子，需要的朋友可以參考一下2013-03-03
Bootstrap每天必學(xué)之基礎(chǔ)排版，排版是學(xué)習(xí)的最基礎(chǔ)環(huán)節(jié)，相當(dāng)于地基，所以大家一定要認(rèn)真對(duì)待，認(rèn)真學(xué)習(xí)本文內(nèi)容。2015-11-11
在使用原生框架開(kāi)發(fā)小程序時(shí)遇到一個(gè)問(wèn)題，在 app.wxss 中定義的全局樣式在自定義組件中不生效，本文就詳細(xì)的介紹一下，感興趣的可以了解一下2021-08-08
基于JavaScript構(gòu)建一個(gè)動(dòng)態(tài)博客應(yīng)用
這篇文章主要為大家詳細(xì)介紹了如何基于JavaScript構(gòu)建一個(gè)動(dòng)態(tài)博客應(yīng)用,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
2024-02-02 
微信小程序?qū)崿F(xiàn)的動(dòng)態(tài)設(shè)置導(dǎo)航欄標(biāo)題功能示例
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)的動(dòng)態(tài)設(shè)置導(dǎo)航欄標(biāo)題功能,結(jié)合實(shí)例形式分析了微信小程序使用wx.setNavigationBarTitle接口動(dòng)態(tài)設(shè)置導(dǎo)航欄標(biāo)題的相關(guān)操作技巧,需要的朋友可以參考下
2019-01-01 
typeScript中數(shù)組類(lèi)型定義及應(yīng)用詳解
相信大家應(yīng)該都知道ts只允許數(shù)組中包括一種數(shù)據(jù)類(lèi)型的值,下面這篇文章主要給大家介紹了關(guān)于typeScript中數(shù)組類(lèi)型定義及應(yīng)用的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2023-05-05 
在網(wǎng)上看到很多人都寫(xiě)了“webpack最佳實(shí)踐方案”，適合的才是“最佳”的，在這里總結(jié)一下自己在工作過(guò)程中總結(jié)出來(lái)的最佳實(shí)踐，所以本文主要介紹了關(guān)于webpack配置的相關(guān)資料，需要的朋友們可以參考借鑒，下面來(lái)一起看看吧。
2017-04-04