jquery操作checkbox火狐下第二次無法勾選的解決方法
最近在學(xué)習(xí)jQuery(版本jquery-1.9.1.js),要求用jQuery實(shí)現(xiàn)全選/全不選、反選,在IE(IE8)中沒有問題,但在火狐瀏覽器中調(diào)試的時候出現(xiàn)了一些小問題,達(dá)不到效果。
html代碼如下:
<div> 你愛好的運(yùn)動是 <input type="checkbox" id="selectal1" /><label for="selectal1">全選/全不選</label><br/> <input name="intrest" type="checkbox" />足球 <input name="intrest" type="checkbox" />籃球 <input name="intrest" type="checkbox" />羽毛球 <input name="intrest" type="checkbox" />乒乓球<br/> <button id="allbtn">全選</button> <button id="notallbtn">全不選</button> <button id="reversebtn">反選</button> <button>提交</button> </div>
jQuery代碼:
<script type="text/javascript" src="jquery-1.9.1.js"></script> <script type="text/javascript"> $().ready(function(){ //全選/全不選復(fù)選框 $("#selectal1").click( function(){ if($(this).attr("checked")==true){ $("input:checkbox[id!='selectal1']").each(function() { $(this).attr("checked",true); }); }else{ $("input:checkbox[id!='selectal1']").each(function() { $(this).attr("checked",false); }); } }); //全選按鈕 $("#allbtn").click(function(){ $("input:checkbox[id!='selectal1']").each(function() { $(this).attr("checked",true); }); }); //全不選按鈕 $("#notallbtn").click(function(){ $("input:checkbox[id!='selectal1']").each(function() { $(this).attr("checked",false); }); }); //反選按鈕 $("#reversebtn").click(function(){ $("input:checkbox[id!='selectal1']").each(function() { $(this).attr("checked",!$(this).attr("checked")); }); }); }) </script>
復(fù)選框綁定了click事件,點(diǎn)一次選中,再點(diǎn)擊取消選中,依次類推。這個功能在IE8中沒問題,但是在firefox中測試的時候,前兩次都沒有問題,可以正常顯示選中和取消,但當(dāng)再去選中的時候,復(fù)選框的屬性checkbox值變?yōu)椤眂hecked”,沒問題,但是復(fù)選框卻不在顯示選中狀態(tài),明明屬性值改了,但是卻不顯示勾選,我以為是瀏覽器緩存的問題,但是刪除緩存還是不行……..后來在網(wǎng)上看到了方法,說是jQuery版本的問題,jQuery1.6以上用attr會存在兼容性問題,得換成prop。
查了下API prop屬性是這樣的:
prop(name|properties|key,value|fn)
概述
獲取在匹配的元素集中的第一個元素的屬性值。
隨著一些內(nèi)置屬性的DOM元素或window對象,如果試圖將刪除該屬性,瀏覽器可能會產(chǎn)生錯誤。jQuery第一次分配undefined值的屬性,而忽略了瀏覽器生成的任何錯誤。
jQuery API明確說明,1.6+的jQuery要用prop,尤其是checkBox的checked的屬性的判斷,于是乎把js代碼里面的attr換成prop就行了。
代碼:
//1.6+的jQuery要用prop代替attr否則達(dá)不到效果?。。?! //全選/全不選復(fù)選框 $("#selectal1").click( function(){ if($(this).prop("checked")==true){ $("input:checkbox[id!='selectal1']").each(function() { $(this).prop("checked",true); }); }else{ $("input:checkbox[id!='selectal1']").each(function() { $(this).prop("checked",false); }); } }); //全選按鈕 $("#allbtn").click(function(){ $("input:checkbox[id!='selectal1']").each(function() { $(this).prop("checked",true); }); }); //全不選按鈕 $("#notallbtn").click(function(){ $("input:checkbox[id!='selectal1']").each(function() { $(this).prop("checked",false); }); }); //反選按鈕 $("#reversebtn").click(function(){ $("input:checkbox[id!='selectal1']").each(function() { $(this).prop("checked",!$(this).prop("checked")); }); });
希望對大家有所幫助。
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- jQuery操作CheckBox的方法介紹(選中,取消,取值)
- jquery操作checkbox實(shí)現(xiàn)全選和取消全選
- 解決jquery操作checkbox火狐下第二次無法勾選問題
- jQuery操作checkbox選擇(list/table)
- jquery、js操作checkbox全選反選
- jquery操作checkbox示例分享
- jquery操作復(fù)選框(checkbox)的12個小技巧總結(jié)
- JQuery對checkbox操作 (循環(huán)獲取)
- jquery對復(fù)選框(checkbox)的操作匯總
- jquery操作checkbox的常用方法總結(jié)【附測試源碼下載】
相關(guān)文章
js+JQuery返回頂部功能如何實(shí)現(xiàn)
很多網(wǎng)站上都有返回頂部的效果,本文闡述如何使用jquery實(shí)現(xiàn)返回頂部按鈕,需要的朋友可以參考下2012-12-12jQuery實(shí)現(xiàn)加入購物車飛入動畫效果
當(dāng)您在電商購物網(wǎng)站瀏覽中意的商品時,您可以點(diǎn)擊頁面中的“加入購物車”按鈕即可將商品加入的購物車中。本文介紹借助一款基于jQuery的動畫插件,點(diǎn)擊加入購物車按鈕時,實(shí)現(xiàn)商品將飛入到右側(cè)的購物車中的效果。2015-03-03jQuery插件HighCharts實(shí)現(xiàn)氣泡圖效果示例【附demo源碼】
這篇文章主要介紹了jQuery插件HighCharts實(shí)現(xiàn)氣泡圖效果,結(jié)合完整實(shí)例形式分析了jQuery插件HighCharts繪制氣泡圖的實(shí)現(xiàn)技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2017-03-03設(shè)置jQueryUI DatePicker默認(rèn)語言為中文
本文主要介紹jQueryUI DatePicker設(shè)置中文的方法,需要的朋友可以參考下。2016-06-06JQuery學(xué)習(xí)筆記 實(shí)現(xiàn)圖片翻轉(zhuǎn)效果和TAB標(biāo)簽切換效果
為了保證前臺頁面的整潔,我們習(xí)慣性地將CSS放入一個單獨(dú)的.CSS文件中以便調(diào)用,而JS也同樣可以放到單獨(dú)的JS文件中去,并且頁面上的事件如onclick,onmouseover也可以分離出來,現(xiàn)在網(wǎng)上比較流行JQuery2008-11-11jquery判斷小數(shù)點(diǎn)兩位和自動刪除小數(shù)兩位后的數(shù)字
這篇文章主要介紹了jquery判斷小數(shù)點(diǎn)兩位和自動刪除小數(shù)兩位后的數(shù)字,需要的朋友可以參考下2014-03-03