title: Trying to get element and store them in array using jquery
body: <p>I have an html structure like this :</p>
  
  <pre><code>&lt;tr&gt;
      &lt;td&gt;NC&lt;/td&gt;
      &lt;td&gt;&lt;%= @subscriptions.where("users.ranking = 'NC'").count %&gt;&lt;/td&gt;
      &lt;td&gt;&lt;input type="checkbox" name="my-checkbox" class="checkbox-ranking" id="bite" data-size='small'&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
      &lt;td&gt;40&lt;/td&gt;
      &lt;td&gt;&lt;%= @subscriptions.where("users.ranking = '40'").count %&gt;&lt;/td&gt;
      &lt;td&gt;&lt;input type="checkbox" name="my-checkbox" class="checkbox-ranking" data-size='small' &gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
      &lt;td&gt;30/5&lt;/td&gt;
      &lt;td&gt;&lt;%= @subscriptions.where("users.ranking = '30/5'").count %&gt;&lt;/td&gt;
      &lt;td&gt;&lt;input type="checkbox" name="my-checkbox" class="checkbox-ranking" data-size='small' &gt;&lt;/td&gt;
  &lt;/tr&gt;
  </code></pre>
  
  <p>I need to write a script that each time a checkbox is checked gets the innerhtml of the first <code>&lt;td&gt;&lt;/td&gt;</code> of each <code>&lt;tr&gt;&lt;/tr&gt;</code> where the checkbox is checked and returns it as an array. </p>
  
  <p>Here's what I came up with :</p>
  
  <pre><code>$(document).ready(function(){
      $('.checkbox-ranking').on('change', function() {
          var rankings = $('.checkbox-ranking:checked').map(function() {
              return $(this).parent().parent().parent().parent().children().first().html();
          }).get().join(',');
          alert(rankings);
      });
  });
  </code></pre>
  
  <p>I must add that I installed the gem bootstrap-switch to have ON/OFF switch button and that is what my checkboxes are. I noticed that I switch on my button, it doesnt pass to <code>checked</code>in the html code, so I guess that's why my code isnt working: the script doesnt actually detects the on change event.</p>
  
  <p>Any other ideas ?</p>