Usa jQuery per trovare l'etichetta per un controllo o una casella di testo selezionata

Question

Voglio un po 'di codice jQuery che mi permetta di trovare l'etichetta per un controllo quando clicco sulla casella di testo ... quindi nel mio HTML ho questo:

<label id="ctl00_WebFormBody_lblProductMarkup" for="ctl00_WebFormBody_txtPriceAdjustment">This Is My Label Value</label> 

<input type="text" style="width:29px;" onclick="alert('label value here');" title="Here is a title" id="ctl00_WebFormBody_txtPriceAdjustment" maxlength="3" name="ctl00$WebFormBody$txtPriceAdjustment"> 

così, quando clicco sul mio testo, che voglio (per esempio) per fare un avviso ... con il testo che è dentro la mia etichetta - quindi in questo caso sarebbe avvisare "questa è la mia etichetta valore"

speranza che abbia un senso :)

Answer 1

$("#ctl00_WebFormBody_txtPriceAdjustment").bind("click",function(){ 
    alert($("label [for=" + this.id + "]").html()); 
}); 

o forse

alert($(this).closest("label").html()); 

a seconda del vostro markup si può solo essere in grado di selezionare i fratelli successivi o precedenti troppo.

Answer 2

In un codice HTML come questo:

<label for="input-email">Email</label> 
<input type="text" name="input-email" value="" /> 

È possibile trovare il contenuto dell'etichetta in questo modo:

$('label[for="input-email"]').html(); 

Answer 3

provare questo:

$('input[type=text]').focus(function(){ 
    alert($('label[for=' + $(this).attr('id') + ']').html()); 
}); 

Answer 4

Usare il selettore di attributo [] come [for='+ this.id +'], dove this.id è il ID del attualmente focus ed label

$('input').on("focus", function() { 
 
    var labelText = $('label[for='+ this.id +']').text(); 
 
    console.log(labelText); 
 
});

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<label for="inp">This Is My Label Value</label> 
 
<input id="inp" type="text" >

Answer 5

$('#ctl00_WebFormBody_txtPriceAdjustment').click(function() { 
    alert($('#ctl00_WebFormBody_lblProductMarkup').text()); 
}); 

Answer 6

farlo con JavaScript

<script type="text/javascript"> 
function displayMessage() 
{ 
alert(document.getElementById("ctl00_WebFormBody_lblProductMarkup").innerHTML); 
} 
</script> 

<label id="ctl00_WebFormBody_lblProductMarkup" for="ctl00_WebFormBody_txtPriceAdjustment">This Is My Label Value</label> 

<input type="text" style="width:29px;" onclick="displayMessage()" title="Here is a title" id="ctl00_WebFormBody_txtPriceAdjustment" maxlength="3" name="ctl00$WebFormBody$txtPriceAdjustment">