HTML+JS实现简单的多选选项的全选反选按钮

前言:多选菜单的全选和反选按钮十分常见,今天就实现一个简单的全选和全不选效果

分析:全选反选按钮关键点在于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;
					
    }
}

完成.