125

HTMLフォームがあるとしましょう。各入力/選択/テキストエリアには、そのコンパニオンの ID に設定され<label>た属性に対応する があります。forこの場合、各入力には 1 つのラベルしかないことがわかっています。

たとえば、onkeyup イベントを介して javascript の入力要素が与えられた場合、関連付けられているラベルを見つける最良の方法は何ですか?

4

21 に答える 21

109

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];
   }
}
于 2008-11-12T22:12:12.763 に答える
96

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

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!';

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

于 2008-11-12T22:24:05.750 に答える
41

入力要素に関連付けられたラベルを指す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;
};
于 2013-02-25T06:16:12.090 に答える
24

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

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

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

このケースを考慮したコードを次に示します。

$.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 を使用せずにこれを実装することもできます。:-)
于 2012-01-18T15:46:43.000 に答える
15

ついさっき...

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 でも実行できます。:-)

于 2008-11-12T22:10:19.520 に答える
8

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

var nameOfLabel = someInput.attr('id');
var label = $("label[for='" + nameOfLabel + "']");
于 2008-11-12T22:15:04.550 に答える
2 
$("label[for='inputId']").text()

これは、ID を使用して入力要素のラベルを取得するのに役立ちました。

于 2011-09-05T06:24:58.960 に答える
2

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);
    });
};
于 2012-10-24T10:48:37.477 に答える
0

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

$("label[for="+inputElement.id+"]")
于 2011-04-12T20:11:35.277 に答える
0

これが古いことは知っていますが、いくつかの解決策に問題があり、これをつなぎ合わせました。これを 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/

于 2014-05-21T18:07:29.867 に答える
0

将来の検索者のために... 以下は、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");
于 2011-08-19T12:56:08.700 に答える