如何使用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(); 

你可以試試。