Tìm nhãn html được liên kết với một đầu vào nhất định

Giả sử tôi có một dạng html. Mỗi đầu vào / select / textarea sẽ có một tương ứng <label>với forthuộc tính được đặt thành id của đồng hành của nó. Trong trường hợp này, tôi biết rằng mỗi đầu vào sẽ chỉ có một nhãn duy nhất.

Cho một phần tử đầu vào trong javascript - ví dụ: thông qua sự kiện onkeyup - cách tốt nhất để tìm nhãn được liên kết của nó là gì?

Đầu tiên, hãy quét trang để tìm nhãn và chỉ định một tham chiếu cho nhãn từ phần tử biểu mẫu thực tế:

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];         
    }
}

Sau đó, bạn có thể chỉ cần đi:

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

Không cần mảng tra cứu :)

Nếu bạn đang sử dụng jQuery, bạn có thể làm như thế này

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

Nếu bạn không sử dụng jQuery, bạn sẽ phải tìm kiếm nhãn. Đây là một hàm nhận phần tử làm đối số và trả về nhãn được liên kết

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];
   }
}

Có một labelsthuộc tính trong tiêu chuẩn HTML5 trỏ đến các nhãn được liên kết với một phần tử đầu vào.

Vì vậy, bạn có thể sử dụng một cái gì đó như thế này (hỗ trợ cho thuộc labelstính gốc nhưng có dự phòng để truy xuất nhãn trong trường hợp trình duyệt không hỗ trợ nó) ...

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;
};

Thậm chí dễ dàng hơn nếu bạn đang sử dụng 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;
};

Tôi hơi ngạc nhiên rằng dường như không ai biết rằng bạn hoàn toàn được phép làm:

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

Câu trả lời nào sẽ không được chọn bởi bất kỳ câu trả lời gợi ý nào, nhưng sẽ gắn nhãn đầu vào chính xác.

Dưới đây là một số mã có tính đến trường hợp này:

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

Sử dụng:

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

Một số lưu ý:

• Mã được viết để rõ ràng, không phải để thực hiện. Có thể có nhiều lựa chọn thay thế hiệu quả hơn.
• Mã này hỗ trợ lấy nhãn của nhiều mục trong một lần. Nếu đó không phải là điều bạn muốn, hãy thích nghi khi cần thiết.
• Điều này vẫn không quan tâm đến những thứ như aria-labelledbynếu bạn sử dụng nó (để lại như một bài tập cho người đọc).
• Sử dụng nhiều nhãn là một công việc khó khăn khi cần hỗ trợ các tác nhân người dùng và công nghệ hỗ trợ khác nhau, vì vậy hãy kiểm tra tốt và tự chịu rủi ro khi sử dụng, v.v.
• Có, bạn cũng có thể thực hiện điều này mà không cần sử dụng jQuery. :-)

Sớm hơn...

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;
    }
}

Một lát sau...

var myLabel = lookup[myInput.id];

Nhận xét của Snarky: Có, bạn cũng có thể làm điều đó với JQuery. :-)

document.querySelector ("label [for =" + vHtmlInputElement.id + "]");

Điều này trả lời câu hỏi theo cách đơn giản và gọn gàng nhất. Điều này sử dụng vani javascript và hoạt động trên tất cả các trình duyệt phù hợp với luồng chính.

với jquery bạn có thể làm điều gì đó như

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

Nếu bạn sẵn sàng sử dụng querySelector (và thậm chí bạn có thể xuống IE9 và đôi khi là IE8!), Một phương pháp khác sẽ khả thi.

Nếu trường biểu mẫu của bạn có ID và bạn sử dụng forthuộc tính của nhãn , điều này trở nên khá đơn giản trong JavaScript hiện đại:

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);
});

Một số đã lưu ý về nhiều nhãn; nếu tất cả chúng đều sử dụng cùng một giá trị cho forthuộc tính, chỉ cần sử dụng querySelectorAllthay vì querySelectorvà lặp lại để nhận mọi thứ bạn cần.

Tất cả các câu trả lời khác đều vô cùng lỗi thời !!

Tât cả nhưng điêu bạn phải lam la:

input.labels

HTML5 đã được hỗ trợ bởi tất cả các trình duyệt chính trong nhiều năm. Hoàn toàn không có lý do gì mà bạn phải tự mình làm từ đầu hoặc làm đầy nó! Theo nghĩa đen, chỉ cần sử dụng input.labelsvà nó giải quyết tất cả các vấn đề của bạn.

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

Điều này đã giúp tôi lấy nhãn của một phần tử đầu vào bằng cách sử dụng ID của nó.

Câu trả lời từ Gijs có giá trị nhất đối với tôi, nhưng tiếc là tiện ích mở rộng không hoạt động.

Đây là một tiện ích mở rộng được viết lại hoạt động, nó có thể giúp ai đó:

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);
    });
};

Một giải pháp thực sự ngắn gọn sử dụng các tính năng của ES6 như hủy cấu trúc và trả về ngầm định để biến nó thành một lớp lót tiện dụng sẽ là:

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

Hoặc đơn giản là lấy một nhãn, không phải NodeList:

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

Thực sự dễ dàng hơn nhiều để thêm id vào nhãn trong chính biểu mẫu, ví dụ:

<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
/>

Sau đó, bạn có thể chỉ cần sử dụng một cái gì đó như sau:

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 phải có trong hàm body onload mới hoạt động được.

Chỉ là một suy nghĩ, làm việc tuyệt vời cho tôi.

Như nó đã được đề cập, câu trả lời (hiện tại) được xếp hạng cao nhất không tính đến khả năng nhúng đầu vào bên trong nhãn.

Vì không ai đăng câu trả lời không có JQuery, đây là của tôi:

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-
}

Trong ví dụ này, để đơn giản, bảng tra cứu được lập chỉ mục trực tiếp bởi các phần tử HTML đầu vào. Điều này hầu như không hiệu quả và bạn có thể điều chỉnh nó theo cách bạn muốn.

Bạn có thể sử dụng biểu mẫu làm phần tử cơ sở hoặc toàn bộ tài liệu nếu bạn muốn lấy nhãn cho nhiều biểu mẫu cùng một lúc.

Không có kiểm tra nào được thực hiện đối với HTML không chính xác (nhiều hoặc thiếu đầu vào bên trong nhãn, thiếu đầu vào với id htmlFor tương ứng, v.v.), nhưng hãy thêm chúng vào.

Bạn có thể muốn cắt bớt văn bản nhãn, vì dấu cách ở cuối thường xuất hiện khi đầu vào được nhúng vào nhãn.

Câu trả lời tốt nhất hoạt động hoàn toàn tốt nhưng trong hầu hết các trường hợp, việc lặp qua tất cả các labelphần tử là quá mức cần thiết và không hiệu quả .

Đây là một hàm hiệu quả để lấy phần tử labelđi kèm 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;
}

Đối với tôi, một dòng mã này là đủ:

el = document.getElementById(id).previousElementSibling;

Trong hầu hết các trường hợp, labelwill rất gần hoặc bên cạnh đầu vào, có nghĩa là vòng lặp trong hàm trên chỉ cần lặp lại một số lần rất nhỏ.

bạn đã thử sử dụng document.getElementbyID ('id') trong đó id là id của nhãn hay là trường hợp bạn không biết mình đang tìm cái nào

Sử dụng bộ chọn JQuery:

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

Đối với những người tìm kiếm trong tương lai ... Sau đây là phiên bản jQuery-ified của câu trả lời được chấp nhận của FlySwat:

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]));   
        }
    }
}

Sử dụng:

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

Tôi biết điều này đã cũ, nhưng tôi đã gặp khó khăn với một số giải pháp và kết hợp điều này lại với nhau. Tôi đã thử nghiệm điều này trên Windows (Chrome, Firefox và MSIE) và OS X (Chrome và Safari) và tin rằng đây là giải pháp đơn giản nhất. Nó hoạt động với ba kiểu gắn nhãn này.

<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>

Sử dụng jQuery:

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

JSFiddle của tôi: http://jsfiddle.net/pnosko/6PQCw/

Tôi đã làm cho nhu cầu của riêng mình, có thể hữu ích cho ai đó: 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");
            }
        }
    }
});

Tôi hơi ngạc nhiên khi không có ai đề xuất sử dụng phương pháp quan hệ CSS?

trong biểu định kiểu, bạn có thể tham chiếu nhãn từ bộ chọn phần tử:

<style>

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

</style>

nếu hộp kiểm có id là 'XXX' thì nhãn sẽ được tìm thấy thông qua jQuery bằng cách:

$('#XXX + label');

Bạn cũng có thể áp dụng .find ('+ label') để trả về nhãn từ phần tử hộp kiểm jQuery, tức là hữu ích khi lặp:

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