title: how to get checked values from a checkbox-group using jquery
body: <p>I want to get the values of all the checked checkboxes in the checkbox-group. </p>
  
  <pre><code> &lt;div class="checkbox-group"&gt;
  &lt;div class="checkbox"&gt;
  &lt;label for="checkbox-group-1501481486714-preview-0"&gt;
  &lt;input name="checkbox-group-1501481486714-preview[]" class="" id="checkbox-group-1501481486714-preview-0" value="physics" type="checkbox" checked="checked"&gt;physics&lt;/label&gt;
  &lt;/div&gt;
  &lt;div class="checkbox"&gt;&lt;label for="checkbox-group-1501481486714-preview-1"&gt;&lt;input name="checkbox-group-1501481486714-preview[]" class="" id="checkbox-group-1501481486714-preview-1" value="math" type="checkbox"&gt;math&lt;/label&gt;
  &lt;/div&gt;
  &lt;div class="checkbox"&gt;&lt;label for="checkbox-group-1501481486714-preview-2"&gt;
  &lt;input name="checkbox-group-1501481486714-preview[]" class="" id="checkbox-group-1501481486714-preview-2" value="chemistry" type="checkbox"&gt;chemistry&lt;/label&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Following is script code</p>
  
  <pre><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 +"&lt;br&gt;");
              }
  
              else if(field.type == "checkbox")
              {
               var result = $('input[type="checkbox"]:checked');
  
               if(result.length &gt; 0)
                  {
                  $("#results").append("this is checked     "+"name:   "+field.name + ":       " +"Value:    "+ field.value +"&lt;br&gt;");
              }
              else{
  
                  $("#results").append("this is unchecked");
              }
              }
  
  
          });
  
  });
  
  
  });
  </code></pre>
  
  <p>When I leave all uncheck then it gives this output</p>
  
  <pre><code>this is unchecked 
  this is unchecked 
  this is unchecked
  </code></pre>
  
  <p>but when I check any it gives this output</p>
  
  <pre><code>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
  </code></pre>
  
  <p>Thanks in Advance</p>