J'ai une structure html comme celle-ci:

<tr>
    <td>NC</td>
    <td><%= @subscriptions.where("users.ranking = 'NC'").count %></td>
    <td><input type="checkbox" name="my-checkbox" class="checkbox-ranking" id="bite" data-size='small'></td>
</tr>
<tr>
    <td>40</td>
    <td><%= @subscriptions.where("users.ranking = '40'").count %></td>
    <td><input type="checkbox" name="my-checkbox" class="checkbox-ranking" data-size='small' ></td>
</tr>
<tr>
    <td>30/5</td>
    <td><%= @subscriptions.where("users.ranking = '30/5'").count %></td>
    <td><input type="checkbox" name="my-checkbox" class="checkbox-ranking" data-size='small' ></td>
</tr>

J'ai besoin d'écrire un script qui chaque fois qu'une case à cocher est cochée obtient le code interne du premier <td></td> de chaque <tr></tr> où la case est cochée et le renvoie sous forme de tableau.

Voici ce que j'ai trouvé:

$(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);
    });
});

Je dois ajouter que j'ai installé le gem bootstrap-switch pour avoir le bouton ON / OFF et c'est ce que sont mes cases à cocher. J'ai remarqué que j'allume mon bouton, il ne passe pas à checked dans le code html, donc je suppose que c'est pour ça que mon code ne fonctionne pas: le script ne détecte pas réellement l'événement on change.

D'autres idées?

1
David Geismar 14 juil. 2015 à 02:43

2 réponses

Meilleure réponse

Ok, maintenant ça marche

$(document).ready(function(){
    $('.checkbox-ranking').on('change', function() {
        var rankings = $('.checkbox-ranking:checked').map(function() {
            return $(this).parent().parent().find('td:first-child').html();
        }).get().join(',');
        alert(rankings);  
    });
});

Et jsfiddle: https://jsfiddle.net/btrauybx/2/

0
jperelli 14 juil. 2015 à 00:04

Essayez d'utiliser closest() et first():

$(function() {
  $('input.checkbox-ranking').on('change', function(e) {
    var ranks = $('input.checkbox-ranking:checked').map(function() {
      return $(this).closest('tr').children().first().text();
    }).get();
    alert(ranks.join(','));
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table>
  <tr>
    <td>NC</td>
    <td>
      <%=@ subscriptions.where( "users.ranking = 'NC'").count %>
    </td>
    <td>
      <input type="checkbox" name="my-checkbox" class="checkbox-ranking" id="bite" data-size='small'>
    </td>
  </tr>
  <tr>
    <td>40</td>
    <td>
      <%=@ subscriptions.where( "users.ranking = '40'").count %>
    </td>
    <td>
      <input type="checkbox" name="my-checkbox" class="checkbox-ranking" data-size='small'>
    </td>
  </tr>
  <tr>
    <td>30/5</td>
    <td>
      <%=@ subscriptions.where( "users.ranking = '30/5'").count %>
    </td>
    <td>
      <input type="checkbox" name="my-checkbox" class="checkbox-ranking" data-size='small'>
    </td>
  </tr>
</table>

Vous pouvez également utiliser eq(0) au lieu de first().

0
user2575725user2575725 14 juil. 2015 à 00:11