获取输入字段的标签

时间:2013-08-22 08:39:31

标签: jquery label each

我正在使用Jquery进行验证,并且需要使用自己的标签从每个元素获取$ label。现在alert()给出了med [object object]。对我来说最好的事情就是获得一个警告(),其中所有字段都排成一行,没有填写。而不是每个人的警报()。

这是一个小提琴: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)    

 }

 });  

在警报()中我希望这样“你需要填写:姓名,电子邮件”

10 个答案:

答案 0 :(得分:26)

尝试提醒$label的内容,您可以{/ 3}}使用此

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

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

}); 

演示:.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)

演示:Fiddle

答案 1 :(得分:3)

尝试

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

 $element = $(this)

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

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

 }

 }); 

DEMO

更新:

  

是否可以在一个alert()中安排所有$ label而不是每个一个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

答案 2 :(得分:1)

尝试提醒

alert($label.text()) 

答案 3 :(得分:1)

因为您要向警报功能发送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)    

 }

 });  

答案 4 :(得分:1)

而不是下线:

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

使用以下代码:

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

您只获得了使用.html().text()获取标签内的文字所需的对象。

答案 5 :(得分:1)

选中此DEMO

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

        $element = $(this);

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

        alert(label)

    }

});

答案 6 :(得分:0)

这不是一个很好的例子,但您可以使用jQuery中的prev函数,该函数将在您选择的组件之前找到上一个标签。

$(document).ready( function() {

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

});

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

答案 7 :(得分:0)

 var response = ""; 
 $('input').each(function(){
     if ($(this).val() == '') {

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

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

答案 8 :(得分:0)

使用JQuery,您可以使用$(input).labels();找到链接到输入的所有标签。

$('input').each( function() {
    var $labels = $(this).labels();
    $labels.each(function(index, element){
        alert($(element));
    });
});

答案 9 :(得分:0)

根据答案的改进,可以将其包装在函数中:

function getLabel(name) {
    var $label = $("label[for='" + name + "']")
    return ($label.text());
}

var label = getLabel(this.id);
console.log(label);

这使得重用代码更加容易。