jquery實現checkbox全選功能,第二次點選【全選】按鈕,頁面無法勾選
阿新 • • 發佈:2019-02-15
去面試,老多人問會不會jQuery啊,會不會ExtJS啊,以前都零星使用過,是使用別人封裝好的版本,沒單獨研究過這些前端技術,閒暇之餘,先研究研究jQuery。
找了本書,做了個jQuery實現全選功能的例子,覺得程式碼邏輯上都沒有問題,第二次點選【全選】按鈕頁面就是無法勾選(在IE、FF、Chrome瀏覽器下均是以上症狀)。
原始程式碼如下:
html程式碼如下:<pre name="code" class="javascript"> /**全選複選框--單擊 */ $("#chkAll").change(function(){ //勾選全選 if(this.checked){ $("table tr td input[type=checkbox]").attr("checked",true); }else{ $("table tr td input[type=checkbox]").attr("checked",false); } });
<table><tr> <td><input id="chk5" name="ch" type="checkbox" value="4"></td> <td>1005</td> <td><img src="image/book/book5.jpg" alt=""/></td> <td>朱濤</td> <td>男</td> <td>27 元</td> </tr> <tr> <td><input id="chk6" name="ch" type="checkbox" value="5"></td> <td>1006</td> <td><img src="image/book/book6.jpg" alt=""/></td> <td>李奎</td> <td>男</td> <td>56 元</td> </tr> </table> <table> <tr> <td> <span><input id="chkAll" type="checkbox"/>全部</span> <span><input id="btnDel" class="btn" type="button" value="刪除"/></span> </td> </tr> </table>
網上查資料,把attr('checked',true)都換成prop('checked',true)即可。
ps:同事說他的程式碼這樣寫就執行正常。
網上查閱資料知:jQuery1.9.1針對checkbox的調整方法,用prop代替attr。
在jquery 1.8.x中的版本,對於checkbox的選中與不選中操作如下:
1.判斷是否選中:$('#checkbox').prop('checked')
2.設定選中與不選中狀態:
$('#checkbox').attr('checked',true)$('#checkbox').attr('checked',false)
但此方法在jquery1.9.1中,有些處理不一樣,同事執行正常的使用的正好是1.8版本,本人使用的是1.11版本。