web-dev-qa-db-fra.com

Utilisez jQuery pour trouver l'étiquette d'un contrôle ou d'une zone de texte sélectionnée

Je veux un peu de code jQuery qui me permettra de trouver l'étiquette d'un contrôle quand je clique sur la zone de texte ... donc dans mon code HTML, j'ai ceci:

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

Ainsi, lorsque je clique sur ma zone de texte, je veux (par exemple) faire une alerte ... avec le texte qui se trouve dans mon étiquette. Dans ce cas, cela alerterait "Ceci est la valeur de mon étiquette"

J'espère que ça a du sens :)

jqueryjquery-selectors
23
Darren

Utilisez le sélecteur d'attributs [] comme [for='+ this.id +'], où this.id est leIDde la focused 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" >

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

ou éventuellement

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

en fonction de votre marquage, vous pourrez peut-être aussi sélectionner le frère suivant ou le frère précédent 

2
rlemon

Dans un code HTML comme celui-ci:

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

Vous pouvez trouver le contenu de l'étiquette comme ceci:

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

essaye ça:

$('input[type=text]').focus(function(){
     alert($('label[for=' + $(this).attr('id') + ']').html());
});
1
Shlomi Komemi
$('#ctl00_WebFormBody_txtPriceAdjustment').click(function() {
  alert($('#ctl00_WebFormBody_lblProductMarkup').text());
});
0
Christopher

Pour le faire avec 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">
0
Mattias Josefsson