JS代碼實現(xiàn)復選框的反選

2012/11/1 20:07:09作者：佚名來源：網(wǎng)絡

移動端

【實例名稱】

JS代碼實現(xiàn)復選框的反選

【實例描述】

當用戶選擇的復選框個數(shù)太多，而且超過復選框總數(shù)的2/3時，為了簡化用戶操作，可以讓用戶先選擇不需要的項，然后使用“反選”按鈕，實現(xiàn)正確的選擇。操作系統(tǒng)的資源管理器就提供了這種功能，用來實現(xiàn)文件的反選。本例介紹如何實現(xiàn)復選框的反選。

【實例代碼】

<HTML>
<HEAD>
<title>反選-學無憂（wangbatian.cn）</title>
<script  language=javascript>  
function  selectOther(chkObj)
{
    for(var  i  =  0;i<chkObj.elements.length;i++)  
//遍歷窗體中的元素
    if(chkObj.elements[i].type  ==  "checkbox"  )   
//判斷元素類型是否是復選框
    {  
        if(!chkObj.elements[i].checked)             
//如果復選框未選中
        chkObj.elements[i].checked  =  true;        
//改為選中狀態(tài)
        else  
        chkObj.elements[i].checked  =  false;       
//改為未選中狀態(tài)
    }
}  
</script>  
</HEAD>
<BODY>
<form name="form1">
    <input id="Checkbox1" name="chk" type="checkbox" />旅游<br />
    <input id="Checkbox2"  name="chk" type="checkbox" />體育<br />
    <input id="Checkbox3" name="chk"  type="checkbox" />音樂<br />
    <input id="Button1" type="button"  value="反選" 
onclick="selectOther(document.form1)" />
</form>
</BODY>
</HTML>

【運行效果】

初始選擇的效果

復選框的反選運行效果