web-dev-qa-db-ja.com

入力フィールドのラベルを取得

私はJqueryで検証を行っており、独自のラベルを持つ各要素から$ labelを取得する必要があります。これで、alert（）はmed [object object]を提供します。ここで私にとって一番いいのは、入力されていないすべてのフィールドが並んだalert（）を取得することです。そして、それぞれのalert（）ではありません。

ここにフィドルがあります： http://jsfiddle.net/s7pYX/

これはどのように達成されますか？

HTML：

<div>
<label for="txtName">Name</label>
<input type="text" id="txtName" class="form-control" name="txtName">
</div>

<div>
<label for="txtEmail">E-mail</label>
<input type="text" id="txtEmail" class="form-control" name="txtEmail">
</div>

Jquery：

 $('input').each(function(){
 if ($(this).val() == '') {

 $element = $(this)

 var $label = $("label[for='"+$element.attr('id')+"']")

 alert($label)    

 }

 });

Alert（）では、このように「あなたは記入する必要があります：名前、電子メール」

jquerylabeleach
13
Kim

$labelの内容を警告してみてください。これには 。text（） を使用できます

$('input').each(function(){
    var $element = $(this)

    if ($element.val() == '') {
        var $label = $("label[for='"+this.id+"']")
        alert($label.text())    
    }

});

デモ： フィドル

更新

var $labels = $("label[for]");
var empties = $('input').filter(function(){
    return $.trim($(this).val()) == ''
}).map(function(){
    return $labels.filter('[for="'+this.id+'"]').text()
}).get().join(', ')

alert(empties)

デモ： フィドル

27
Arun P Johny

試して

$('input').each(function(){
 if ($(this).val() == '') {

 $element = $(this)

 var $label = $("label[for='"+$element.attr('id')+"']")

 alert("You need to fill :" + $label.text())    

 }

 });

[〜＃〜] demo [〜＃〜]

更新：

すべての$ labelをそれぞれ1つのalert（）ではなく1つのalert（）に配置することは可能ですか？

はい

var errorString ="";
var isNeedToFill=false;
$('input').each(function(){
 if ($(this).val() == '') {
isNeedToFill =true;
 $element = $(this)

 var $label = $("label[for='"+$element.attr('id')+"']");
  errorString += $label.text()+" ";
 }
 }); 
 if(isNeedToFill){
 alert("You need to fill :" +errorString);
 }

[〜＃〜] demo [〜＃〜]

3
Suresh Atta

警告しよう

alert($label.text())
1
Kanishka Panamaldeniya

objectをアラート関数に送信しているため、選択したラベルのコンテンツを取得するには、htmlを取得する必要があります http://jsfiddle.net/s7pYX/2/

 $('input').each(function(){
 if ($(this).val() == '') {

 $element = $(this)

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

 alert($label)    

 }

 });
1
MaveRick

以下の行の代わりに：

_var $label = $("label[for='"+$element.attr('id')+"']"
_

次のコードを使用します。

_var $label = $("label[for='"+$element.attr('id')+"']").text();
_

ラベルタグ内のテキストを取得するために.html()または.text()を使用する必要があるオブジェクトのみを取得しています。

1
Code Lღver

これを確認してください [〜＃〜] demo [〜＃〜]

$('input').each(function () {
    if ($(this).val() == '') {

        $element = $(this);

        var label = $element.closest("div").find("label").text();

        alert(label)

    }

});
1
Arvind Bhardwaj

JQueryでは、$（input）.labels（）;で入力にリンクされたすべてのラベルを見つけることができます。

$('input').each( function() {
    var $labels = $(this).labels();
    $labels.each(function(index, element){
        alert($(element));
    });
});
0
Catherine Audet
 var response = ""; 
 $('input').each(function(){
     if ($(this).val() == '') {

     response += ", " + $('label[for="' + this.id + '"]').html();
     }
 }); 

alert(response.replace(", ", "You need to fill out: "));
0
Sheetal

これは良い例ではありませんが、jQueryのprev関数を使用して、選択したコンポーネントの前の前のラベルを見つけることができます。

$(document).ready( function() {

   $('input').each(function(){
       alert($(this).prev("label").html())
   });

});

JSFiddle： http://jsfiddle.net/gQnaM/

0
Mark