貓羽的文字日誌

這個功能有些不直覺，算是有點變化javascript與html的應用，為checkbox的全選/反全選的程式碼，有時會遇到就來記錄一下，以下可以用一般的html網頁進行測試。



1、
這是javascript部份的程式段。功能就是把name為指定參數的選項通通打勾/取消勾選
其中.trigger("click");這行會觸發onclick，至於checkboxs[i].checked = obj.checked;這行把符合目標的物件逐一打勾。

<script type="text/javascript">
     function checkAll(obj, cName) {
              var checkboxs = document.getElementsByName(cName);
              $("input[name=" + cName + "]").prop("checked", true).trigger("click");
              for (var i = 0; i < checkboxs.length; i++) {
                  checkboxs[i].checked = obj.checked;
              }
      }
</script> 

以下是checkbox的部份， 重點在於要給name這個參數，這個name與id不同是可以重複的，再丟值到checkAll函式。

<input type="checkbox" id="cAll" name="cAll" onclick="checkAll(this, 'c14')" />全選<br/> 
<input type="checkbox" id="c14_1" name="c14" value="1" />選項1<br/> 
<input type="checkbox" id="c14_2" name="c14" value="2" />選項2<br/> 
<input type="checkbox" id="c14_3" name="c14" value="3" />選項3<br/> 
<input type="checkbox" id="c14_4" name="c14" value="4" />選項4<br/> 

成功的畫面如下，如果有沒打勾的選項會通通勾選，如果全部都已勾選則會回到未勾選的狀態。
 

2、
這是前述的相關問題，例如點選文字勾選該項目checkbox，原本我以為可能要寫個onclick再點選什麼的，事實上有更簡單的做法如下：
<label for="c14_3">選項3</label>

去查教學網站是這麼寫的：
"for" 属性可把 label 绑定到另外一个元素。请把 "for" 属性的值设置为相关元素的 id 属性的值。
也就是在label加上for參數就可以解決上述問題，這個問題的答案只有一行，了解為何可以如此做的原因也很重要，以上就介紹到這邊。