最近在學習jQuery(版本jquery-1.9.1.js),要求用jQuery實現全選/全不選、反選,在IE(IE8)中沒有問題,但在火狐浏覽器中調試的時候出現了一些小問題,達不到效果。
html代碼如下:
<div> 你愛好的運動是 <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(){ //全選/全不選復選框 $("#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>
復選框綁定了click事件,點一次選中,再點擊取消選中,依次類推。這個功能在IE8中沒問題,但是在firefox中測試的時候,前兩次都沒有問題,可以正常顯示選中和取消,但當再去選中的時候,復選框的屬性checkbox值變為”checked”,沒問題,但是復選框卻不在顯示選中狀態,明明屬性值改了,但是卻不顯示勾選,我以為是浏覽器緩存的問題,但是刪除緩存還是不行……..後來在網上看到了方法,說是jQuery版本的問題,jQuery1.6以上用attr會存在兼容性問題,得換成prop。
查了下API prop屬性是這樣的:
prop(name|properties|key,value|fn)
概述
獲取在匹配的元素集中的第一個元素的屬性值。
隨著一些內置屬性的DOM元素或window對象,如果試圖將刪除該屬性,浏覽器可能會產生錯誤。jQuery第一次分配undefined值的屬性,而忽略了浏覽器生成的任何錯誤。
jQuery API明確說明,1.6+的jQuery要用prop,尤其是checkBox的checked的屬性的判斷,於是乎把js代碼裡面的attr換成prop就行了。
代碼:
//1.6+的jQuery要用prop代替attr否則達不到效果!!!! //全選/全不選復選框 $("#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")); }); });
希望對大家有所幫助。
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持。