初学Javascript，用Javascript实现简单的全选和反选功能

用Javascript实现简单的全选和反选功能

结构

	<h5 id="h5">全选</h5>                            <!-- 全选按钮-->
	<h5 id="h5-2">反选</h5>                          <!-- 反选按钮-->
	<input type="checkbox" />1<br/>
	<input type="checkbox" />2<br/>
	<input type="checkbox" />3<br/>
	<input type="checkbox" />4<br/>                  <!-- 复选框-->
	<input type="checkbox" />5<br/>
	<input type="checkbox" />6<br/>
	<input type="checkbox" />7<br/>

样式
这里给两个按钮加了点儿样式

#h5 {
			width:30px;
			border:1px solid black;
			border-radius:4px;
			background:chocolate;
		}
#h5_2 {
			width:30px;
			border-radius:4px;
			background:green;
		}

行为

<script type="text/javascript">
        <!-- window.function() 让浏览器打开时就加载或执行function()函数-->
		window.function(){
		    <!-- 定义3个变量，并初始化：即将元素h5,h5_2,input传递给这3个变量，方便后续调用-->
			var oh5=document.getElementById('h5');
			var oh5_2=document.getElementById('h5_2');
			var allInput=document.getElementsByTagName('input');
			<!--为事件“点击Id名为‘h5’的元素”添加“全选”行为-->
			oh5.function(){
			    <!-- 注意：allInput[i]表示第i+1个input标签。 allInput.length即为全部input的长度（个数）。checked=true表示“选择”的状态-->
				for(i=0;i<allInput.length;i++){
					allInput[i].checked=true;
				}
			}
			<!--为事件“点击Id名为‘h5_2’的元素”添加“反选”行为，方法类似“全选”-->
			oh5_2.function(){
				for(j=0;j<allInput.length;j++){
					if(allInput[j].checked==true) {
						allInput[j].checked=false;
					}
					else {
						allInput[j].checked=true;
					}
				}
			}
		}
	</script>

依次点击“全选”，“反选”+“2 5 7”，“反选”的效果。