किसी दिए गए इनपुट के साथ जुड़े html लेबल का पता लगाएं

Question

मान लीजिए कि मेरे पास एक HTML फॉर्म है। प्रत्येक इनपुट / सेलेक्ट / टेक्सटारिया में उसके साथी की आईडी पर सेट <label>की गई forविशेषता के अनुरूप होगा । इस मामले में, मुझे पता है कि प्रत्येक इनपुट में केवल एक ही लेबल होगा।

जावास्क्रिप्ट में इनपुट तत्व को देखते हुए - उदाहरण के लिए, ऑनकीअप ईवेंट के माध्यम से - यह संबंधित लेबल खोजने का सबसे अच्छा तरीका क्या है?

Comments

ध्यान दें कि एक तत्व में एक से अधिक लेबल हो सकते हैं, मैंने कुछ एप्लिकेशन (एसएपी एक के लिए) देखे हैं जिनमें प्रति तत्व कई लेबल हैं।

— मोति जूल

function getInputLabel(thisElement) { var theAssociatedLabel,elementID; elementID = thisElement.id; theAssociatedLabel = thisElement.parentNode.querySelector("label[for='" + elementID + "']"); console.log('theAssociatedLabel.htmlFor: ' + theAssociatedLabel.htmlFor); theAssociatedLabel.style.backgroundColor = "green";//Set the label background color to green };

— एलन वेल्स

या सिर्फ node.parentNode.querySelector ("लेबल [for = '" + node.id + ""] ") - भीतर HTML था; lol

— सोलोमन पी बायर

Answer 1

सबसे पहले, लेबल के लिए पृष्ठ को स्कैन करें, और वास्तविक फॉर्म एलिमेंट से लेबल का संदर्भ निर्दिष्ट करें:

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

लुकअप सरणी के लिए कोई ज़रूरत नहीं है :)

Comments

क्या आप बता सकते हैं कि एक्सपेंडो प्रॉपर्टी का आपका उपयोग कहां से अलग है? मैं किसी भी "लुकअप ऐरे" का उपयोग नहीं करता, मैं गुणों के साथ किसी ऑब्जेक्ट का उपयोग करता हूं। "Element.label", "element ['लेबल']" या "लुकिंग ['elementId']" के बीच केवल वाक्यात्मक अंतर है। पर्दे के पीछे वे एक ही चीज हैं ।

— तोमलक

यह अच्छा है क्योंकि मुझे अलग वस्तु को रखने की आवश्यकता नहीं है- संबंध सीधे इनपुट तत्व के साथ संग्रहीत किया जाता है।

— जोएल कोएहॉर्न

इसे ब्राउज़र द्वारा संभाला जाना चाहिए

— औरहो

Answer 2

यदि आप 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];
   }
}

Answer 3

एचटीएमएल 5 मानक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;
};

Comments

न केवल क्रोम में, यह एचटीएमएल 5 मानक में है ।

— बरगी

यह waaaay ऊपर होना चाहिए। धन्यवाद!

— अधिकतम

Answer 4

मैं थोड़ा हैरान हूं कि किसी को भी पता नहीं लगता है कि आपको पूरी तरह से अनुमति है:

<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 का उपयोग किए बिना भी लागू कर सकते हैं। :-)

Comments

किसी को अंतर्निहित लेबल एसोसिएशन को सामने लाते हुए देखकर एक धारणा बनाने का विरोध किया forगया कि labelतत्व पर हमेशा एक विशेषता होगी ।

— जोश हबदास

Answer 5

इससे पहले ...

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

Snarky टिप्पणी: हाँ, आप इसे JQuery के साथ भी कर सकते हैं। :-)

Comments

अच्छा लगा। मैं इसे केवल इसलिए थोड़ा रिफ्लेक्टर करूंगा कि यह विधि को पहली बार देखने के लिए लुकअप बनाता है, लेकिन इसे ट्रिक करना चाहिए।

— जोएल कोएहॉर्न १२'०el

मुझे लगा कि आप केवल एक बार लुकअप का निर्माण करेंगे।

— तोमलक

ध्यान रखें कि इसमें एक छोटी सी त्रुटि थी: "htmlFor" संपत्ति का उपयोग करें, न कि "के लिए", क्योंकि जेएस में उत्तरार्द्ध एक आरक्षित शब्द है। मैं भूल जाता हूं कि लेबल ऑब्जेक्ट का उपयोग करते समय ... :-)

— टॉमालक

मैं ऊपर एक लुकअप सरणी के बिना ऐसा करने का एक तरीका मिला है।

— फ्लाईसवाट

मेरा मतलब था कि इनिट कोड को विधि के अंदर ले जाना, यह सिर्फ एक बार नहीं करना है :(

— जोएल कोएहॉर्न

Answer 6

document.querySelector ("लेबल [for =" + vHtmlInputElement.id + "]");

यह सवाल का सबसे सरल और दुबले तरीके से उत्तर देता है। यह वेनिला जावास्क्रिप्ट का उपयोग करता है और सभी मुख्य-स्ट्रीम उचित ब्राउज़रों पर काम करता है।

Comments

यह प्रश्न का उत्तर प्रदान नहीं करता है। एक बार आपके पास पर्याप्त प्रतिष्ठा होने पर आप किसी भी पोस्ट पर टिप्पणी कर पाएंगे ; इसके बजाय, ऐसे उत्तर प्रदान करें जिन्हें पूछने वाले से स्पष्टीकरण की आवश्यकता न हो । - समीक्षा से

— लोकी

यह निश्चित रूप से प्रश्न @loki को सिर्फ इसलिए उत्तर देता है क्योंकि इसमें कोई और स्पष्टीकरण नहीं है, इसका मतलब यह नहीं है कि यह गलत है या इसका उत्तर देने का प्रयास नहीं किया गया है।

— ज्येष्ठफर्ज़ ००

सबसे सरल और उपयोगी उत्तर! धन्यवाद!

— iedmrc

Answer 7

jquery के साथ आप कुछ ऐसा कर सकते हैं

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

Comments

संभावित रूप से लेबल याद करते हैं हालांकि वे पूर्वज हैं।

— एलेक्स

Answer 8

यदि आप querySelector का उपयोग करने के लिए तैयार हैं (और आप IE9 और कभी-कभी IE8 से भी नीचे का उपयोग कर सकते हैं!), तो एक और तरीका व्यवहार्य हो जाता है।

यदि आपके फॉर्म फ़ील्ड में एक आईडी है, और आप लेबल की forविशेषता का उपयोग करते हैं , तो यह आधुनिक जावास्क्रिप्ट में बहुत सरल हो जाता है:

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।

Answer 9

अन्य सभी उत्तर अत्यंत पुराने हैं !!

तुमको बस यह करना है:

input.labels

HTML5 को सभी प्रमुख ब्राउज़रों द्वारा कई वर्षों से समर्थित किया गया है। वहाँ बिल्कुल कोई कारण नहीं है कि आप इसे अपने दम पर खरोंच या इसे polyfill से बनाना चाहिए है! शाब्दिक रूप से सिर्फ उपयोग करते हैं input.labelsऔर यह आपकी सभी समस्याओं को हल करता है।

Comments

इस पृष्ठ के अनुसार , input.labelsIE या एज द्वारा समर्थित नहीं है, और फ़ायरफ़ॉक्स ने केवल समर्थन जोड़ा है।

— एंटि .29

@ Antti29 आप एक शिम का उपयोग करके कार्यक्षमता जोड़ सकते हैं: github.com/termi/ES5-DOM-SHIM आप यहाँ जोड़े जा रहे फ़ीचर को देख सकते हैं: github.com/termi/ES5-DOM-SHIM/blob-…

— ADJenks

Answer 10

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

इसने मुझे इसकी आईडी का उपयोग करके इनपुट तत्व का लेबल प्राप्त करने में मदद की।

Answer 11

गिज्स का उत्तर मेरे लिए सबसे मूल्यवान था, लेकिन दुर्भाग्य से विस्तार काम नहीं करता है।

यहां एक लिखित विस्तार है जो काम करता है, यह किसी की मदद कर सकता है:

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

Answer 12

ES6 सुविधाओं का उपयोग करके वास्तव में संक्षिप्त समाधान विनाशकारी और निहित रिटर्न का उपयोग करके इसे एक आसान लाइनर में बदल देगा:

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

या बस एक लेबल पाने के लिए, नॉडलिस्ट नहीं:

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

Answer 13

उदाहरण के लिए, फॉर्म में लेबल में एक आईडी जोड़ना वास्तव में बहुत आसान है:

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

जावास्क्रिप्ट को काम करने के लिए एक बॉडी ऑनलोड फ़ंक्शन में होना चाहिए।

बस एक विचार, मेरे लिए खूबसूरती से काम करता है।

Answer 14

जैसा कि यह पहले ही उल्लेख किया गया है, (वर्तमान में) टॉप-रेटेड उत्तर किसी लेबल के अंदर इनपुट एम्बेड करने की संभावना को ध्यान में नहीं रखता है।

चूंकि किसी ने 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 आईडी, आदि के साथ अनुपलब्ध इनपुट) के लिए कोई जांच नहीं की जाती है, लेकिन उन्हें जोड़ने के लिए स्वतंत्र महसूस करें।

आप लेबल ग्रंथियों को ट्रिम करना चाह सकते हैं, क्योंकि लेबल में एम्बेडेड होने के बाद अनुगामी स्थान अक्सर मौजूद होते हैं।

Answer 15

सबसे अच्छा जवाब पूरी तरह से ठीक काम करता है, लेकिन ज्यादातर मामलों में, यह सभी 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;
}

मेरे लिए, कोड की यह एक पंक्ति पर्याप्त थी:

el = document.getElementById(id).previousElementSibling;

ज्यादातर मामलों में, labelवसीयत इनपुट के बहुत करीब या बगल में होगी, जिसका अर्थ है कि उपरोक्त फ़ंक्शन में लूप को केवल बहुत कम संख्या में पुनरावृति करने की आवश्यकता है।

Answer 16

क्या आपने document.getElementbyID ('id') का उपयोग करने की कोशिश की है, जहां id लेबल की आईडी है या ऐसी स्थिति है कि आप नहीं जानते कि आप किसकी तलाश कर रहे हैं

Comments

मुझे इनपुट तत्व की आईडी पता है, लेकिन लेबल की आईडी नहीं।

— जोएल कोएहॉर्न

क्या आप इनपुट आईडी = 'परीक्षण' और लेबल आईडी = 'lbl_test' जैसे लेबल के लिए संबंधित आईडी सेट नहीं कर सकते हैं

— जोश में

Answer 17

JQuery चयनकर्ता का उपयोग करें:

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

Answer 18

भविष्य के खोजकर्ताओं के लिए ... निम्नलिखित फ्लाईस्वाट के स्वीकृत उत्तर का एक jQuery-ified संस्करण है:

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

Comments

+1, लेकिन जो मैं देख रहा हूं, उसमें पहले ब्लॉक के लिए jQuery संस्करण का उपयोग करने का कारण नहीं है: यह कोई छोटा या अधिक पठनीय नहीं है, और सादे जावास्क्रिप्ट बेहतर प्रदर्शन करेगा। हालाँकि, एक बार बनाया गया उपयोग कैसे किया जाए, इसके चारों ओर jQuery का उदाहरण होना अच्छा है।

— जोएल कोएहॉर्न

जाहिर है कि हम में से कई इस दृष्टिकोण के लिए तकनीकी कारण नहीं है, बल्कि एक कारण है, कम से कम मेरे मामले में, एक एचआर है। कल्पना कीजिए कि आपके पास एक टीम है जिसमें डिजाइनर, इंटीग्रेटर और यहां तक ​​कि जूनियर देव शामिल हैं जिन्हें आपने धीमा कर दिया है, उन्हें jQuery का उपयोग करने की आदत है। चीजों को jQuery के प्रतिमान में रखने से उत्पादकता को बनाए रखने और हताशा को कम करने में मदद मिल सकती है।

— 15

यह बहुत jQuery-ified नहीं है । forलूप पर क्यों each()? htmlForइसके बजाय क्यों attr("for")?

— एलेक्स

मुझे लगता है कि दृष्टिकोण पर निर्भर करता है। खपत jQuery-ified था, न कि आंतरिक।

— ObjectType

Answer 19

मुझे पता है कि यह पुराना है, लेकिन मुझे कुछ समाधानों से परेशानी थी और इसे एक साथ जोड़ दिया। मैंने इसे विंडोज (क्रोम, फायरफॉक्स और एमएसआईई) और ओएस एक्स (क्रोम और सफारी) पर परीक्षण किया है और विश्वास है कि यह सबसे सरल समाधान है। यह एक लेबल संलग्न करने की इन तीन शैली के साथ काम करता है।

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

Comments

यह वास्तव में काम नहीं कर रहा है - यह सिर्फ मूल तत्व के पाठ को वापस कर रहा है, जो कभी-कभी आपके इच्छित पाठ के रूप में होता है।

— बजे जॉन हस्कल

Answer 20

मैंने अपनी जरूरत के लिए बनाया है, किसी के लिए उपयोगी हो सकता है: 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");
            }
        }
    }
});

Answer 21

मैं थोड़ा हैरान हूं कि कोई भी सीएसएस संबंध विधि का उपयोग करने का सुझाव नहीं दे रहा है?

एक स्टाइल शीट में आप तत्व चयनकर्ता से एक लेबल का संदर्भ ले सकते हैं:

<style>

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

</style>

अगर चेकबॉक्स में 'XXX' की आईडी है तो लेबल jQuery के माध्यम से मिल जाएगा:

$('#XXX + label');

आप jQuery के चेकबॉक्स तत्व से लेबल को वापस करने के लिए .find ('+ लेबल') भी लागू कर सकते हैं, अर्थात जब लूपिंग उपयोगी हो:

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

Comments

ओह, मुझे ध्यान देना चाहिए कि यह सीधे तत्व के बाद आने वाले लेबल पर निर्भर करता है।

— गॉर्डन