javascript - 如何使用 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>