jquery全選全不選詳解

一、jquery實現全選

在實際項目中，有時候需要對多個input checkbox進行全選或全不選操作，這時候可以使用jquery來方便地實現。

<script>
    // 給全選的checkbox添加點擊事件
    $('#selectAll').on('click', function() {
        $('input[type="checkbox"]').prop('checked', true);
    });
</script>

上述代碼中，我們給一個名為”selectAll”的checkbox添加了點擊事件，當這個checkbox被點擊後，所有type為checkbox的input都會被選中。

但是，如果已經有部分checkbox被選中，我們再點擊全選，則會取消選中狀態，這並不是我們想要的效果。

下面我們對代碼進行修改，先判斷全選checkbox是否被選中（prop(‘checked’)返回一個布爾值），如果已選中則將所有複選框設為選中狀態，否則將所有複選框設為不選中狀態。

<script>
    $('#selectAll').on('click', function() {
        $('input[type="checkbox"]').prop('checked', $(this).prop('checked'));
    });
</script>

二、jquery 全選

以上代碼可以實現全選功能，但是在實際應用中還有一種情況：每個選項後面都有對應的數量，選中後需要計算總數量，在全選的基礎上，還需要計算總數量。

<script>
    $('#selectAll').on('click', function() {
        var total = 0;
        $('input[type="checkbox"]').each(function() {
            if($(this).prop('checked')) {
                total += parseInt($(this).next().text());
            }
            $(this).prop('checked', true);
        });
        $('#total').text(total);
    });
</script>

以上代碼中，我們定義了一個變量total，用於累加選中的數量。每個複選框被選中後，我們獲取它的下一個元素，即數量，將其轉為整數並累加到total中。

最後，我們設置總數量的文本為total。這樣就可以實現全選並計算數量的功能。

三、jquery實現複選框全選選取

在實際項目中，往往還需要對多個複選框進行全選選取操作，這時候我們需要使用jquery的each函數遍歷每個checkbox，用一個計數器記錄選中的個數，如果遍歷完所有checkbox後計數器等於複選框的個數，則表示所有複選框都被選中，此時我們將全選checkbox設為選中狀態即可。

<script>
    $('input[type="checkbox"]').on('click', function() {
        var count = 0;
        $('input[type="checkbox"]').each(function() {
            if($(this).prop('checked')) {
                count++;
            }
        });
        if(count == $('input[type="checkbox"]').length) {
            $('#selectAll').prop('checked', true);
        } else {
            $('#selectAll').prop('checked', false);
        }
    });
</script>

以上代碼中，我們給每個複選框添加了點擊事件。在事件處理函數中，我們先遍歷每個複選框，如果被選中則計數器加1。如果計數器等於複選框的總個數，則表示所有複選框都被選中，此時將全選checkbox設為選中狀態，否則設為不選中狀態。

至此，我們就實現了複選框的全選選取功能。