JavaScript實現(xiàn)CheckBox選中方法

作者：佚名 2009-09-08 13:52:54

JavaScript實現(xiàn)CheckBox選中所有的項的方法的文章很少見，這是筆者精心為大家準(zhǔn)備的禮物，代碼的借鑒性很高，也很好理解，希望能給大家?guī)韼椭?/div>

JavaScript實現(xiàn)CheckBox選中所有的項的方法的文章很少見，這是筆者精心為大家準(zhǔn)備的禮物，代碼的借鑒性很高，也很好理解，希望能給大家?guī)韼椭?/P>

JavaScript實現(xiàn)CheckBox選中所有的項的方法：

<html> 
<head> 
<title> 
title> 
<body> 
<form name="Form1"> 
<input name="allbox" type="checkbox" onClick="TA();" title="選中或清除選中所有的項目" tabindex="105">選中或清除選中所有的項目  
<br/> 
<span class="X"> 
<input type="checkbox" name="ABC" class="A" onClick="TTA(this);">清明時節(jié)span> 
<br/> 
<span class="X"> 
<input type="checkbox" name="DEF" class="A" onClick="TTA(this);">長江水啊span> 
<br/> 
<span class="X"> 
<input type="checkbox" name="GHL" class="A" onClick="TTA(this);">嘿嘿測試span> 
<br/> 
form> 
<script language="javascript"> 
var frm = document.Form1;  
script> 
<script language="JavaScript"> 
function TA(isO,noHL){  
 var trk = 0;  
 for(var i=0;i<frm.elements.length;i++){  
  var e=frm.elements[i];  
  if((e.name !='allbox') && (e.type == 'checkbox')){  
    e.checked = frm.allbox.checked;  
   if (frm.allbox.checked){  
    //e.parentElement.className = "H"; //.parentElement不兼容firefox瀏覽器   
    e.parentNode.className = "H";//調(diào)用設(shè)置父節(jié)點元素class改變背景色  
   }else{  
    e.parentNode.className = "X";//調(diào)用設(shè)置父節(jié)點元素class改變背景色  
   }  
  }  
 }  
}  
function TTA(CB,noHL){  
 if (CB.checked){  
  CB.parentNode.className = "H";  
 }else{  
  CB.parentNode.className = "X";  
 }  
 var TB=TO=0;  
 for (var i=0;i<frm.elements.length;i++){  
  var e=frm.elements[i];  
  if ((e.name != 'allbox') && (e.type=='checkbox')){  
   TB++;  
  if (e.checked)  
   TO++;  
  }  
 }  
 frm.allbox.checked=(TO==TB)?true:false;  
 //如果不是所有項被選中則allbox設(shè)定未被選中  
}  
script> 
<style> 
.H{  
 background: #ADD8E6  
}  
.X{  
 background: #FFFFFF  
}  
style> 
body>html>

以上就是對JavaScript實現(xiàn)CheckBox選中所有的項方法的簡單介紹。

【編輯推薦】

JSON是什么？為JavaScript準(zhǔn)備的數(shù)據(jù)格式
十個最常用的JavaScript自定義函數(shù)
有關(guān)JavaScript事件加載的一些延伸思考
JavaScript使用心得匯總：從BOM和DOM談起
ExtJS在Android模擬器上的運行效果

責(zé)任編輯：阡陌來源：網(wǎng)絡(luò)轉(zhuǎn)載

CheckBox選中