checkbox做全選按鈕

1.先寫一個html頁面，里面寫一個全選按鈕和幾個復選框，實現下面2個要求

（1）點擊全選按鈕選中時，所有的復選框選中.

（2）點擊全選按鈕取消選中時，所有復選框取消選中。

<input type="checkbox" id="quanxuan" />全選<br />
<input type="checkbox" class="qx" />aa<br />
<input type="checkbox" class="qx" />aa<br />
<input type="checkbox" class="qx" />aa<br />
<input type="checkbox" class="qx" />aa<br />
<input type="checkbox" class="qx" />aa<br />

2.js處理代碼

$("#quanxuan").click(function(){//給全選按鈕加上點擊事件
        var xz = $(this).prop("checked");//判斷全選按鈕的選中狀態
        var ck = $(".qx").prop("checked",xz);  //讓class名為qx的選項的選中狀態和全選按鈕的選中狀態一致。  
        })

以上代碼完全可以完美的實現要求的2個功能。這里需要注意的是不能使用下面的方法做全選按鈕，因為下面的方法有嚴重的不足之處。

1.html頁面

<input type="checkbox" onclick="quanxuan(this)" />全選<br />
<input type="checkbox" class="qx" />aa<br />
<input type="checkbox" class="qx" />aa<br />
<input type="checkbox" class="qx" />aa<br />
<input type="checkbox" class="qx" />aa<br />
<input type="checkbox" class="qx" />aa<br />

2.處理頁面

<script type="text/javascript">
function quanxuan(a)
{
    //找到下面所有的復選框
    var ck =document.getElementsByClassName("qx");
    
    //遍歷所有復選框，設置選中狀態。
    for(var i=0;i<ck.length;i++)
    {
        if(a.checked)//判斷全選按鈕的狀態是不是選中的
        {
            ck[i].setAttribute("checked","checked");//如果是選中的，就讓所有的狀態為選中。
        }
        else
        {
            ck[i].removeAttribute("checked");//如果不是選中的，就移除所有的狀態是checked的選項。
        }
    }
}
</script>

上面的方法看似也可以實現全選按鈕的功能，但是執行下列操作步驟后就會出現問題：

（1）點擊任意一個復選框，使復選框處於選中狀態；

（2）點擊全選按鈕，所有復選框變成了選中狀態；

（3）再次點擊全選按鈕，所有按鈕應該取消選中狀態。但是問題出現了，第1步中選中的選中的按鈕還是處於選中狀態。

這就是第二種全選按鈕方法存在的弊端，所以全選按鈕最好使用第一種，方便而實用。