如何使用jQuery从复选框组获取检查值

Question

I want to get the values of all the checked checkboxes in the checkbox-group.

 <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>

Following is script code

    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");
            }
            }


        });

});


});

When I leave all uncheck then it gives this output

this is unchecked 
this is unchecked 
this is unchecked

but when I check any it gives this output

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

Thanks in Advance

Answer 1

You can do this simple loop:

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

if you want only form a group lets say .group then change the selector to

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

demo:

 $('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

You can try below demo code for get selected value.

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

you can try.