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步中選中的選中的按鈕仍是處於選中狀態。

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