web-dev-qa-db-ja.com

特定の入力に関連付けられたHTMLラベルを検索

Htmlフォームがあるとします。各input/select/textareaには、対応する<label>があり、for属性がそのコンパニオンのIDに設定されます。この場合、各入力には単一のラベルしかありません。

Javascriptの入力要素（onkeyupイベントなど）が与えられた場合、関連付けられたラベルを見つける最良の方法は何ですか？

javascripthtmllabel
95
Joel Coehoorn

まず、ページのラベルをスキャンし、実際のフォーム要素からラベルへの参照を割り当てます。

var labels = document.getElementsByTagName('LABEL');
for (var i = 0; i < labels.length; i++) {
    if (labels[i].htmlFor != '') {
         var elem = document.getElementById(labels[i].htmlFor);
         if (elem)
            elem.label = labels[i];         
    }
}

次に、あなたは単に行くことができます：

document.getElementById('MyFormElem').label.innerHTML = 'Look ma this works!';

ルックアップ配列は必要ありません:)

80
FlySwat

JQueryを使用している場合、次のようなことができます

$('label[for="foo"]').hide ();

JQueryを使用していない場合は、ラベルを検索する必要があります。以下は、要素を引数として取り、関連するラベルを返す関数です

function findLableForControl(el) {
   var idVal = el.id;
   labels = document.getElementsByTagName('label');
   for( var i = 0; i < labels.length; i++ ) {
      if (labels[i].htmlFor == idVal)
           return labels[i];
   }
}
99
TonyB

HTML5標準 には、入力要素に関連付けられたラベルを指すlabelsプロパティがあります。

したがって、このようなものを使用できます（ネイティブlabelsプロパティのサポートが、ブラウザーがサポートしていない場合にラベルを取得するためのフォールバックを使用）...

var getLabelsForInputElement = function(element) {
    var labels = [];
    var id = element.id;

    if (element.labels) {
        return element.labels;
    }

    id && Array.prototype.Push
        .apply(labels, document.querySelector("label[for='" + id + "']"));

    while (element = element.parentNode) {
        if (element.tagName.toLowerCase() == "label") {
            labels.Push(element);
        }  
    }

    return labels;
};

// ES6
var getLabelsForInputElement = (element) => {
    let labels;
    let id = element.id;

    if (element.labels) {
        return element.labels;
    }

    if (id) {
        labels = Array.from(document.querySelector(`label[for='${id}']`)));
    }

    while (element = element.parentNode) {
        if (element.tagName.toLowerCase() == "label") {
            labels.Push(element);
        }  
    }

    return labels;
};

JQueryを使用している場合はさらに簡単です...

var getLabelsForInputElement = function(element) {
    var labels = $();
    var id = element.id;

    if (element.labels) {
        return element.labels;
    }

    id && (labels = $("label[for='" + id  + "']")));

    labels = labels.add($(element).parents("label"));

    return labels;
};
25
alex

あなたが 完全に許可されている をしていることを誰も知らないように見えることに少し驚いています：

<label>Put your stuff here: <input value="Stuff"></label>

提案された回答のいずれにも取り上げられませんが、willは入力に正しくラベル付けします。

このケースを考慮に入れるコードは次のとおりです。

$.fn.getLabels = function() {
    return this.map(function() {
        var labels = $(this).parents('label');
        if (this.id) {
            labels.add('label[for="' + this.id + '"]');
        }
        return labels.get();
    });
};

使用法：

$('#myfancyinput').getLabels();

いくつかのメモ：

  • コードはパフォーマンスのためではなく、明確にするために作成されました。より高性能な代替手段が利用できる場合があります。
  • このコードは、複数のアイテムのラベルを一度に取得することをサポートします。それが望んでいない場合は、必要に応じて適応します。
  • これを使用する場合は aria-labelledby のようなことはまだ行いません（読者への課題として残しておきます）。
  • 複数のラベルを使用することは、さまざまなユーザーエージェントや支援技術でのサポートに関しては扱いにくいビジネスなので、十分にテストし、ご自身の責任で使用してください。
  • はい、jQueryを使用せずにこれを実装することもできます。 :-)
22
Gijs

以前...

var labels = document.getElementsByTagName("LABEL"),
    lookup = {},
    i, label;

for (i = 0; i < labels.length; i++) {
    label = labels[i];
    if (document.getElementById(label.htmlFor)) {
        lookup[label.htmlFor] = label;
    }
}

後...

var myLabel = lookup[myInput.id];

気味の悪いコメント：はい、JQueryでもできます。 :-)

14
Tomalak

document.querySelector（ "label [for =" + vHtmlInputElement.id + "]"）;

これは、最も単純で無駄のない方法で質問に答えます。これは、Vanilla javascriptを使用し、すべてのメインストリームの適切なブラウザーで動作します。

9
Luigi D'Amico

jqueryを使用すると、次のようなことができます

var nameOfLabel = someInput.attr('id');
var label = $("label[for='" + nameOfLabel + "']");
8
AndreasKnudsen

querySelector を使用したい場合（そして、IE9まで、場合によってはIE8まで！）、別のメソッドが実行可能になります。

フォームフィールドにIDがあり、ラベルのfor属性を使用する場合、これは最新のJavaScriptではかなり単純になります。

var form = document.querySelector('.sample-form');
var formFields = form.querySelectorAll('.form-field');

[].forEach.call(formFields, function (formField) {
    var inputId = formField.id;
    var label = form.querySelector('label[for=' + inputId + ']');
    console.log(label.textContent);
});

複数のラベルについて言及している人もいます。すべてがfor属性に同じ値を使用する場合は、querySelectorAllの代わりにquerySelectorを使用し、必要なすべてを取得するためにループスルーします。

4
Brendan
$("label[for='inputId']").text()

これにより、IDを使用して入力要素のラベルを取得できました。

2
haifacarina

Gijsからの回答は私にとって最も価値がありましたが、残念ながら拡張機能は動作しません。

これが機能するように書き直された拡張機能です。誰かを助けるかもしれません：

jQuery.fn.getLabels = function () {
    return this.map(function () {
        var parentLabels = $(this).parents('label').get();
        var associatedLabels = this.id ? associatedLabels = $("label[for='" + this.id + "']").get() : [];
        return parentLabels.concat(associatedLabels);
    });
};
2
OzrenTkalcecKrznaric

実際には、フォーム自体のラベルにidを追加する方がはるかに簡単です。次に例を示します。

<label for="firstName" id="firstNameLabel">FirstName:</label>

<input type="text" id="firstName" name="firstName" class="input_Field" 
       pattern="^[a-zA-Z\s\-]{2,25}$" maxlength="25"
       title="Alphabetic, Space, Dash Only, 2-25 Characters Long" 
       autocomplete="on" required
/>

次に、次のように単純に使用できます。

if (myvariableforpagelang == 'es') {
   // set field label to spanish
   document.getElementById("firstNameLabel").innerHTML = "Primer Nombre:";
   // set field tooltip (title to spanish
   document.getElementById("firstName").title = "Alfabética, espacio, guión Sólo, 2-25 caracteres de longitud";
}

Javascriptは、機能するためにbody onload関数に含まれている必要があります。

ちょうど考え、私のために美しく働く。

1
Martie Henry

既に言及したように、（現在）最高評価の回答は、ラベル内に入力を埋め込む可能性を考慮していません。

誰もJQueryフリーの回答を投稿していないので、ここに私のものがあります：

var labels = form.getElementsByTagName ('label');
var input_label = {};
for (var i = 0 ; i != labels.length ; i++)
{
    var label = labels[i];
    var input = label.htmlFor
              ? document.getElementById(label.htmlFor)
              : label.getElementsByTagName('input')[0];
    input_label[input.outerHTML] = 
        (label.innerText || label.textContent); // innerText for IE8-
}

この例では、簡単にするために、ルックアップテーブルは入力HTML要素によって直接インデックス付けされます。これはほとんど効率的ではなく、好きなように調整できます。

フォームをベース要素として使用するか、複数のフォームのラベルを一度に取得する場合はドキュメント全体を使用できます。

不正なHTML（ラベル内の複数の入力または欠落、対応するhtmlFor idの欠落など）のチェックは行われませんが、自由に追加してください。

入力がラベルに埋め込まれているときに末尾のスペースが存在することが多いため、ラベルテキストをトリミングすることをお勧めします。

1
kuroi neko

JQueryセレクターを使用します。

$("label[for="+inputElement.id+"]")
0
Mike McKay

document.getElementbyID（ 'id'）を使用しようとしましたか？idはラベルのidまたは探しているものがわからない状況です

0
Josh Mein

私はこれが古いことを知っていますが、いくつかのソリューションに問題があり、これをつなぎ合わせました。これをWindows（Chrome、Firefox、MSIE）およびOS X（ChromeおよびSafari）でテストしましたが、これが最も簡単なソリューションであると考えています。この3つのスタイルのラベル添付で機能します。

<label><input type="checkbox" class="c123" id="cb1" name="item1">item1</label>

<input type="checkbox" class="c123" id="cb2" name="item2">item2</input>

<input type="checkbox" class="c123" id="cb3" name="item3"><label for="cb3">item3</label>

JQueryの使用：

$(".c123").click(function() {
    $cb = $(this);
    $lb = $(this).parent();
    alert( $cb.attr('id') + ' = ' + $lb.text() );
});

私のJSFiddle： http://jsfiddle.net/pnosko/6PQCw/

0
Peter Nosko

最良の答えは完璧に機能しますが、ほとんどの場合、すべてのlabel要素をループするのはやり過ぎで非効率的です。

label要素に付随するinputを取得する効率的な関数を次に示します。

function getLabelForInput(id)
{
    var el = document.getElementById(id);
    if (!el)
        return null;
    var elPrev = el.previousElementSibling;
    var elNext = el.nextElementSibling;
    while (elPrev || elNext)
    {
        if (elPrev)
        {
            if (elPrev.htmlFor === id)
                return elPrev;
            elPrev = elPrev.previousElementSibling;
        }
        if (elNext)
        {
            if (elNext.htmlFor === id)
                return elNext;
            elNext = elNext.nextElementSibling;
        }
    }
    return null;
}

私にとっては、この1行のコードで十分でした。

el = document.getElementById(id).previousElementSibling;

ほとんどの場合、labelは入力の非常に近くまたは隣にあります。つまり、上記の関数のループは、非常に少ない回数だけ繰り返す必要があります。

0
Dan Bray

他のすべての答えはextremely時代遅れ!!

あなたがしなければならないことは次のとおりです。

input.labels

HTML5は、長年にわたってすべての主要なブラウザでサポートされています。これを自分で一から作成するか、ポリフィルする必要がある理由はまったくありません！文字通りinput.labelsを使用するだけで、すべての問題が解決します。

0
dj nag

私は自分のニーズのために作った、誰かのために役立つことができます： JSFIDDLE

$("input").each(function () {
    if ($.trim($(this).prev('label').text()) != "") {
        console.log("\nprev>children:");
        console.log($.trim($(this).prev('label').text()));
    } else {
        if ($.trim($(this).parent('label').text()) != "") {
            console.log("\nparent>children:");
            console.log($.trim($(this).parent('label').text()));
        } else {
            if ($.trim($(this).parent().prev('label').text()) != "") {
                console.log("\nparent>prev>children:");
                console.log($.trim($(this).parent().prev('label').text()));
            } else {
                console.log("NOTFOUND! So set your own condition now");
            }
        }
    }
});
0
itsazzad

CSSリレーションシップメソッドの使用を提案している人がいないことに少し驚いています。

スタイルシートでは、要素セレクタからラベルを参照できます。

<style>

//for input element with class 'YYY'
input.YYY + label {}

</style>

チェックボックスのIDが「XXX」の場合、ラベルはjQueryで次のように検索されます。

$('#XXX + label');

.find（ '+ label'）を適用してjQueryチェックボックス要素からラベルを返すこともできます。つまり、ループする場合に便利です。

$('input[type=checkbox]').each( function(){
   $(this).find('+ label');
});
0
Gordon Rouse

構造化や暗黙的なリターンなどのES6機能を使用して便利な1つのライナーに変換する、非常に簡潔なソリューションは次のとおりです。

const getLabels = ({ labels, id }) => labels || document.querySelectorAll(`label[for=${id}]`)

または、NodeListではなく1つのラベルを取得するには：

const getFirstLabel = ({ labels, id }) => labels && labels[0] || document.querySelector(`label[for=${id}]`)
0
StateOfTheArtJonas

将来の検索者向け...以下は、FlySwatの承認済み回答のjQuery化バージョンです。

var labels = $("label");
for (var i = 0; i < labels.length; i++) {
    var fieldId = labels[i].htmlFor;
    if (fieldId != "") {
        var elem = $("#" + fieldId);
        if (elem.length != 0) {
            elem.data("label", $(labels[i]));   
        }
    }
}

を使用して：

$("#myFormElemId").data("label").css("border","3px solid red");
0
ObjectType