通常在設計網頁時如果有包含表單元素,大多會使用 Label 標籤來定義說明,但是每個表單元素和 Label 標籤都要加上 id 和 for 屬性顯得有點麻煩,所以下列函式就是用來替這些元素自動補上 for 和 id 屬性。

範例:http://beboss.idv.tw/autolabel.php

目前只抓取 label 前後的表單元素,若 label 和 表單元素之間有其他標籤則無作用,交給大家去解決吧 XD

$(function(){ AutoLabel(); });

var AutoLabel = function(){
  $('label').each(function(n){
    //get the next object
    var $obj = $(this).next();
    //append id and for attributes into elements
    switch( $obj.attr('type') ){
      case 'text': case 'password': case 'radio': case 'checkbox':
        $(this).attr('for', 'label' + n);
        $obj.attr('id', 'label' + n);
        break;
    }
    //in especial for textarea and select element
    if(typeof($obj.get(0)) != 'undefined'){
      switch($obj.get(0).tagName.toLowerCase()){
        case 'textarea': case 'select':
          $(this).attr('for', 'label' + n);
          $obj.attr('id', 'label' + n);
          break;
      }
    }
    //same as above;
    var $obj = $(this).prev(); //get the previous object
    switch( $obj.attr('type') ){
      case 'text': case 'password': case 'radio': case 'checkbox':
        $(this).attr('for', 'label' + n);
        $obj.attr('id', 'label' + n);
        break;
    }
    if(typeof($obj.get(0)) != 'undefined'){
      switch($obj.get(0).tagName.toLowerCase()){
        case 'textarea': case 'select':
          $(this).attr('for', 'label' + n);
          $obj.attr('id', 'label' + n);
          break;
      }
    }
  });
}