[jQuery] 自動替表單元素加入 label for 屬性
通常在設計網頁時如果有包含表單元素,大多會使用 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;
}
}
});
}
通常在設計網頁時如果有包含表單元素,大多會使用 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;
}
}
});
}