在很多網站裡這都是一個很常見的效果,就是點擊總分類的複選框,自動選擇所有子分類的複選框,或者如果子分類的所有複選框全部被選中則總分類複選框也自動被選中。
這次偶時再msn的網站上偶然看到的,於是自己也試著寫了下。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title></title> <script type="text/javascript"> function checkAll(str){ var a=document.getElementById("t"+str).getElementsByTagName("input"); var b=document.getElementById("d"+str); for(var i=0;i<a.length;i++){ a[i].checked=b.checked; } } function fixChk(str){ var a=document.getElementById("t1").getElementsByTagName("input"); var b=document.getElementById("d1"); for(var i=0;i<a.length;i++){ if(a[i].checked==false){ b.checked=false; return ; } } b.checked=true; } </script> </head> <body> <center> <div ><input type="checkbox" id="d1" onclick="checkAll('1')"/>休閑娛樂</div> <div id="t1"> <input type="checkbox" onclick="fixChk('1')" />書籍及雜誌 <input type="checkbox" onclick="fixChk('1')" />音樂及影碟 <input type="checkbox" onclick="fixChk('1')" />旅遊 </div> </center> </body> </html>
[Ctrl+A 全選 注:如需引入外部Js需重新整理才能執行]