前言:多選選單的全選和反選按鈕十分常見,今天就實現一個簡單的全選和全不選效果

分析:全選反選按鈕關鍵點在於check型別input的checked屬性,當該屬性為true時為選中狀態,為false時為不選中狀態.

下面著手實現效果:

1.編寫HTML頁面

<input type="button" value="全選" onclick="checkAll()" />
<input type="button" value="全不選" onclick="unCheckAll()" />
		
<input class="hobby" type="checkbox" value="javaEE" /> javaEE
<input class="hobby" type="checkbox" value="bigData" /> bigData
<input class="hobby" type="checkbox" value="php" /> php
<input class="hobby" type="checkbox" value="h5" /> h5
<input class="hobby" type="checkbox" value="python" /> python
 

2.編寫checkAll()方法和unCheckAll()方法

function checkAll(){
	var hobby  =document.getElementsByClassName("hobby");
	for(var i  =0;i<hobby.length;i++){
	    var h = hobby[i];
	    h.checked = true;				
    }
				
}
			
function  unCheckAll(){
	var hobby  =document.getElementsByClassName("hobby");
	for(var i  =0;i<hobby.length;i++){
	    var h = hobby[i];
	    h.checked = false;
					
    }
}
 

完成.