如何使用jquery从复选框组获取选中的值

Question

我想获取复选框组中所有选中复选框的值。

<div class="checkbox-group"> 
<div class="checkbox"> 
<label for="checkbox-group-1501481486714-preview-0"> 
<input name="checkbox-group-1501481486714-preview[]" class="" id="checkbox-group-1501481486714-preview-0" value="physics" type="checkbox" checked="checked">physics</label> 
</div> 
<div class="checkbox"><label for="checkbox-group-1501481486714-preview-1"><input name="checkbox-group-1501481486714-preview[]" class="" id="checkbox-group-1501481486714-preview-1" value="math" type="checkbox">math</label> 
</div> 
<div class="checkbox"><label for="checkbox-group-1501481486714-preview-2"> 
<input name="checkbox-group-1501481486714-preview[]" class="" id="checkbox-group-1501481486714-preview-2" value="chemistry" type="checkbox">chemistry</label> 
</div> 
</div> 

以下是脚本代码

document.getElementById('btn').addEventListener('click', function() { 

     $(document).ready(function(){ 

     var x = $(".userform").find(":input"); 
     $.each(x, function(i, field){ 
      if(field.type == "text") 
      { 
       $("#results").append("name: "+field.name + ":  " +"Value: "+ field.value +"<br>"); 
      } 

      else if(field.type == "checkbox") 
      { 
      var result = $('input[type="checkbox"]:checked'); 

      if(result.length > 0) 
       { 
       $("#results").append("this is checked  "+"name: "+field.name + ":  " +"Value: "+ field.value +"<br>"); 
      } 
      else{ 

       $("#results").append("this is unchecked"); 
      } 
      } 


     }); 

}); 


}); 

当我把一切都取消选中则给出了这样的输出

this is unchecked 
this is unchecked 
this is unchecked 

，但是当我检查任何它给这个输出

this is checked name: checkbox-group-1500619332922: Value: on 
this is checked name: checkbox-group-1500619332922: Value: on 
this is checked name: checkbox-group-1500619332922: Value: on 

在此先感谢

Answer 1

你可以做到这一点简单的循环：

var values = []; 
$('input[type="checkbox"]:checked').each(function(i,v){ 
    values.push($(v).val()); 
}); 

，如果你想只形成一组可以说.group然后选择更改为

$('.group input[type="checkbox"]:checked') 

演示：

$('input[type="checkbox"]').change(function() { 
 

 
    $('.checkbox-group').each(function() { 
 
    var values = []; 
 
    $(this).find('input[type="checkbox"]:checked').each(function(i, v) { 
 
     values.push($(v).val()); 
 
    }); 
 
    console.log(values); 
 
    }) 
 
})

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

 
<div class="checkbox-group"> 
 
    <div class="checkbox"> 
 
    <label for="checkbox-group-1501481486714-preview-0"> 
 
<input name="checkbox-group-1501481486714-preview[]" class="" id="checkbox- 
 
group-1501481486714-preview-0" value="option-1" type="checkbox" 
 
checked="checked">Option 1</label> 
 
    </div> 
 
    <div class="checkbox"><label for="checkbox-group-1501481486714-preview-1"> 
 
<input name="checkbox-group-1501481486714-preview[]" class="" id="checkbox- 
 
group-1501481486714-preview-1" value="option-2" type="checkbox">Option 
 
2</label> 
 
    </div> 
 
</div> 
 
<div class="checkbox-group"> 
 
    <div class="checkbox"> 
 
    <label for="checkbox-group-1501481486714-preview-0"> 
 
<input name="checkbox-group-1501481486714-preview[]" class="" id="checkbox- 
 
group-1501481486714-preview-0" value="option-1 group-2" type="checkbox" 
 
checked="checked">Option 1</label> 
 
    </div> 
 
    <div class="checkbox"><label for="checkbox-group-1501481486714-preview-1"> 
 
<input name="checkbox-group-1501481486714-preview[]" class="" id="checkbox- 
 
group-1501481486714-preview-1" value="option-2 group-2" type="checkbox">Option 
 
2</label> 
 
    </div> 
 
</div>

Answer 2

您可以尝试下面的演示代码获取选定的值。

var demo = $("input[type="checkbox"]:checked").map(function() { return $(this).val(); }).get(); 

你可以试试。