javascript實現全選全不選
來源：程序員人生 發布時間：2014-12-10 08:59:44 閱讀次數：2426次
在JSP頁面中有6個復選框，第1個復選框是全選和全不選，其余5個為普通復選框，當點擊全選復選框后，普通復選框將被全部選中，如果再次點擊 全選復選框，那末普通復選框將被全部不選中，同時，如果全選復選框在選中狀態下，將普通復選框的選中狀態去掉，那末全選復選框也被設為未選中。相反，如果當前全選復選框未被選中，如果普通復選框被全部選中，那末全選按鈕也被選中。
下面看JSP中復選框代碼
<table>
<tr>
<td><input type="checkbox" name="checkall" onclick="selectall()"></td>
<td>全選</td>
</tr>
<tr>
<td><input type="checkbox" name="check" onclick="checkItem(this)"></td>
<td>1</td>
</tr>
<tr>
<td><input type="checkbox" name="check" onclick="checkItem(this)"></td>
<td>2</td>
</tr>
<tr>
<td><input type="checkbox" name="check" onclick="checkItem(this)"></td>
<td>3</td>
</tr>
<tr>
<td><input type="checkbox" name="check" onclick="checkItem(this)"></td>
<td>4</td>
</tr>
<tr>
<td><input type="checkbox" name="check" onclick="checkItem(this)"></td>
<td>5</td>
</tr>
</table>
然后我們看他們的javascript代碼
<script type="text/javascript">
function selectall(){
//獲得全選復選框
var root = document.getElementById("checkall");
//獲得全選復選框的狀態
var status = root.checked;
//獲得其他復選框集合
var elem = document.getElementsByName("check");
//如果全選復選框狀態為真則全選其他按鈕,否則選不選其他按鈕
if(status){
for(var i = 0;i<elem.length;i++){
elem[i].checked = true;
}
}else{
for(var i = 0;i<elem.length;i++){
elem[i].checked = false;
}
}
}
function checkItem(ele){
var root = document.getElementById("checkall");
if(!ele.checked){
//當在全選狀態去除某個非全選復選框時，全選復選框checked屬性要設為false
root.checked = false;
}else{
//當在全不選狀態時，補全剩下的非全選復選框時，全選復選框checked屬性設為true
var elem = document.getElementsByName(ele.name);
for(var i = 0;i<elem.length;i++){
if(!elem[i].checked){
return;
}
}
root.checked = true;
}
}
</script>
這樣就能夠實現上述功能。
生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈
