1. 程式人生 > >JS利用複選框實現全選和反選

JS利用複選框實現全選和反選

<script>  
    function setChecked(obj) 
	{  
        
        var chbs=document.getElementsByName("chb[]");//獲取到複選框的名稱  
       
	//全選
	//JS的if判斷中Undefined型別視為false,其他型別視為true;
	//obj.id是定義過的值,型別為非Undefined,所以視為true。
    if(obj.id)
	{
		for(var i=1;i<chbs.length;i++)
		{  		
		//若全選框的結果為選中,則進行全選操作,否則進入下一步
		//obj.checked表示複選框當前狀態,已選為true,未選為false。
		    if(obj.checked == true)
			{ 
				var chb = chbs[i];
				chb.checked = true;
			}           
		}  		
		
		//全不選
		for(var i=1;i<chbs.length;i++)
		{  
		//若全選框的結果為沒選中,則進行全不選操作,否則進入下一步	
		if(obj.checked == false)
			{
				var chb = chbs[i];
				chb.checked = false;
			}         
		}  		
	}else
   {
		//若子選擇全選,全選框也選中。
	    if(chbs[1].checked && chbs[2].checked && chbs[3].checked && chbs[4].checked)
	    {	
			chbs[0].checked = true;			
	    }else//若子選項沒有全選,全選框不選中。
	    {		
			chbs[0].checked = false;			  
	    }
	}	
}