背景需求:全選,取消全選,以及所有選中後自動勾選全選,全選後取消一個時同時自動取消全選(不知道怎麼描述這個功能,就這麼解釋吧。。。)html
html代碼以下:this
<input type="checkbox" id="checkAll" name="checkAll"/>全選 <input type="checkbox" name="check" value="1"/>1 <input type="checkbox" name="check" value="2"/>2 <input type="checkbox" name="check" value="3"/>3 <input type="checkbox" name="check" value="4"/>4 <input type="checkbox" name="check" value="5"/>5
如今開始作全選和取消全選code
功能要求:如題,就是點擊一次全選再點擊一次取消htm
$(document).ready(function(){ //全選與取消全選 $("#checkAll").click(function(){ if( $("#checkAll").attr("checked")=="checked"){ $("input[name='check']").attr("checked",true); }else{ $("input[name='check']").attr("checked",false); } }); })
好,如今全選作完了,那麼假如我點擊全選後,發現有一個是我不須要的,我又取消掉它,這時候全選按鈕是否是 應該自動的取消全選?那再假如我發現這個選項其實我仍是須要的,我又給勾上了,這時全選框是否是也應該勾上(全選框應該是自動適應其他複選框的)input
功能要求:同上,如題同步
接着後面寫:io
$(document).ready(function(){ //全選與取消全選 $("#checkAll").click(function(){ if( $("#checkAll").attr("checked")=="checked"){ $("input[name='check']").attr("checked",true); }else{ $("input[name='check']").attr("checked",false); } }); //同步全選功能 $("input[name='check']").click(function(){ var flag = true; $("input[name='check']").each(function(){ if($(this).attr("checked")!="checked"){ flag=fasle; return; } }); if(flag){ $("#checkAll").attr("checked",true); }else{ $("#checkAll").attr("checked",false); } }); })
如今全選功能就完善了,各位猿友能夠試試。function
代碼手打,不免有錯字、漏字、描述不清等現象,歡迎你們批評指導,若是以爲有用,就告訴我一聲,給我點鼓勵。
class