如何阅读jquery复选框的值？

Question

<li> 
<input type= "checkbox" name="paradigm" id="id_1" value="3"/> 
<label for="name_3">foo</label> 
</li> 

<li> 
<input type= "checkbox" name="paradigm" id="id_2" value="4"/> 
<label for="name_4">bar</label> 
</li> 

这是两个复选框。如果我选中复选框id_1，使用jquery我想阅读标签foo。如果我检查了两个，那么它应该是['foo','bar']。

Answer 1

只要<label>元素紧跟他们的<input>元素S，那么你可以做这样的事情：

var a = [ ]; 
$('input[name=paradigm]:checked').next('label').each(function() { 
    a.push($(this).text()); 
}); 

一个更好的解决办法是设置在你的标签要素适当for属性（即请确保它们与其复选框上的id属性匹配），然后：

var a = [ ]; 
$('input[name=paradigm]:checked').each(function() { 
    a.push($('label[for=' + this.id + ']').text()); 
}); 

Answer 2

试试这个：

var vSring = ""; 
$("input:checkbox[name='paradigm']").click(function(){ 

    if($("input:checkbox[name='paradigm']").filter(":checked").length==2) 
    { 
     vSring=""; 
     $("input:checkbox[name='paradigm']").each(function(){ 
      var vText = $(this).next().text(); 
      if(vSring=="") 
       vSring = vText+","; 
      else 
       vSring = vSring+vText+",";  
     }); 
     alert(vSring); 
    } 
    else 
    { 
     if($(this).is(":checked")) 
     { 
      vSring=""; 
      vSring=$(this).next().text(); 
      alert(vSring); 
     } 
    } 
}); 

CLICK HERE TO SEE THE DEMO

Answer 3

var checkedLabels = []; 
$(':checkbox').each(function() { 
    if (this.checked) { 
     var label = $('label[for="' + this.id + '"]').text(); 
     checkedLabels.push(label); 
    } 
}); 

Answer 4

$("input:checkbox:checked").map(function(){ 
    return $(this).next().text(); 
}).get(); 

看到一个working demo