title: Get and display checked checkbox index
body: <p>I'm trying to display the checkbox position when the user check the checkbox every time using Jquery. For example, when user check Monday, it will display position 0 and when user check Sunday, it will display position 6. I could not find a way to do it. I have tried to use .index() but it keep showing me 0. Any idea on how to do it?</p>
  
  <p>HTML code</p>
  
  <pre><code>&lt;div class="col-sm-9 checkbox_days"&gt;
      &lt;label class="checkbox"&gt;
          &lt;input type="checkbox" class="day" name="day[]" value="Monday"&gt; Monday
      &lt;/label&gt;
      &lt;label class="checkbox"&gt;    
          &lt;input type="checkbox" class="day" name="day[]" value="Tuesday"&gt; Tuesday
      &lt;/label&gt;
      &lt;label class="checkbox"&gt;
          &lt;input type="checkbox" class="day" name="day[]" value="Wednesday"&gt; Wednesday
      &lt;/label&gt;
      &lt;label class="checkbox"&gt;
          &lt;input type="checkbox" class="day" name="day[]" value="Thursday"&gt; Thursday
      &lt;/label&gt;
      &lt;label class="checkbox"&gt;                        
          &lt;input type="checkbox" class="day" name="day[]" value="Friday"&gt; Friday
      &lt;/label&gt;
      &lt;label class="checkbox"&gt;                        
          &lt;input type="checkbox" class="day" name="day[]" value="Saturday"&gt; Saturday
      &lt;/label&gt;
      &lt;label class="checkbox"&gt;                        
          &lt;input type="checkbox" class="day" name="day[]" value="Sunday"&gt; Sunday
      &lt;/label&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>JQuery </p>
  
  <pre><code>$('.day').on('change', function() {
      $(this).each(function() {
          if (this.checked) {
              alert($(this).index());
          } else {
              alert("unchecked");
          }
      });
  });
  </code></pre>