jquery全選小功能

背景需求:全選,取消全選,以及所有選中後自動勾選全選,全選後取消一個時同時自動取消全選(不知道怎麼描述這個功能,就這麼解釋吧。。。)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

相關文章
相關標籤/搜索