Border的快樂生活記錄

今天來和大家分享checkbox複選方塊全選的做法

這很多地方都會用到   跟大家分享

 

1. js寫法 

function chkall(obj)
{
    var num=0;
    // 取出總共有幾個checkbox
    num=document.getElementsByName('c1[]').length;


    if(obj.checked==1)
    {
       for(i=0;i<num;i++)
       {
          // 全部勾選
          document.getElementsByName('c1[]')[i].checked=true;
       }
    }
    else
    {
       for(i=0;i<num;i++)
       {
          // 全部取消
          document.getElementsByName('c1[]')[i].checked=false;
       }
    }

}

2. HTML

<form name="F3" method="POST" action="">
 <input name="chk" type="checkbox" value="全選"  onclick="chkall(this)" />全選 <br>
 <input name="c1[]" type="checkbox" value="選項一" />選項一 <br>
 <input name="c1[]" type="checkbox" value="選項二" />選項二 <br>
 <input name="c1[]" type="checkbox" value="選項三" />選項三 <br>
 <input name="c1[]" type="checkbox" value="選項四" />選項四 <br>
 <input name="c1[]" type="checkbox" value="選項五" />選項五 <br>
 <input name="c1[]" type="checkbox" value="選項六" />選項六 <br>
</form>


這樣就完成了
參考範例

 

維度自動免費架站系統，讓你快速擁有自己的網站
維度架站(新版系統)
維度架站
維度雲商城