how to get checked values from a checkbox-group using 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

madalinivascu · Accepted Answer · 2017-07-31 07:11:43Z

3

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>

edited Jul 31, 2017 at 7:11

answered Jul 27, 2017 at 10:35

madalinivascu

32.4k4 gold badges41 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

Bashir ahmad Over a year ago

not working. same problem when i checked one all return 'on' but when leave all uncheck then return nothing.

madalinivascu Over a year ago

what do you want to return if they are not checked?

Bashir ahmad Over a year ago

nothing but if any one is checked want get its value i.e "phy" , "math" or "phy".

madalinivascu Over a year ago

@Bashirahmad the answer should get those values in a array if the checkboxes are checked

Bashir ahmad Over a year ago

yes i want the same but the result here is quite opposite. if i check one then loop run three times and if I check two then it run the same three times. which i think there is problem 'input[type="checkbox"]:checked' in here.

|

madalinivascu · Accepted Answer · 2017-07-31 07:13:32Z

0

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.

edited Jul 31, 2017 at 7:13

madalinivascu

32.4k4 gold badges41 silver badges59 bronze badges

answered Jul 27, 2017 at 13:03

Er Amit Anand

501 silver badge7 bronze badges

1 Comment

Roko C. Buljan Over a year ago

You can use this.value instead. Know your DOM Element properties.

Collectives™ on Stack Overflow

how to get checked values from a checkbox-group using jquery

2 Answers 2

10 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

10 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related