jQuery plusieurs boutons radio

Question

Nouveauté de javascript / jquery et difficulté à utiliser " this " ou " $ (this) " pour obtenir l'objet actuel.

J'ai une table avec un ensemble de boutons radio sur chaque ligne, chacun nommé "s_". Aucun des boutons radio n'est coché par défaut:

<tr>
   <td align="left" style="width: 300px">
      <div id="div_s_0">
         <input type="radio" name="s_0" value="1" />Public
         <input type="radio" name="s_0" value="2" />Not Public
         <input type="radio" name="s_0" value="3" />Confidential
      </div>
   </td>
</tr>
<tr>
   <td align="left" style="width: 300px">
      <div id="div_s_1">
         <input type="radio" name="s_1" value="1" />Public
         <input type="radio" name="s_1" value="2" />Not Public
         <input type="radio" name="s_1" value="3" />Confidential
      </div>
   </td>
</tr>

J'essaie d'écrire une fonction jQuery pour ajouter une nouvelle ligne à la table chaque fois que l'utilisateur sélectionne un bouton radio, mais uniquement s'il se trouve actuellement sur la dernière ligne de la table. Ce que j'aimerais faire, c'est obtenir l'attribut name du bouton radio cliqué, l'analyser pour obtenir l'index de ligne (c'est-à-dire la partie après le '_') et le comparer au nombre de lignes de la table. Si elles sont égales, ajoutez une nouvelle ligne, sinon, ne faites rien.

Ma question est double, en fonction de la manière dont je devrais attaquer ceci:

1) Comment renvoyer l'attribut name d'un bouton radio, OU 2) Comment puis-je retourner l'index de la ligne dans laquelle je me trouve actuellement?

Answer 1

Cela vous donnera l'index, en utilisant le code HTML que vous avez fourni:

$(document).ready(function() {
    $("input:radio").click(function() {
        var index = parseInt(this.name.split('_')[1])
    });
});

Une autre chose qui peut vous aider: récupérer le nombre de lignes de votre table:

$($("table").children()[0]).children().length

J'espère que cela vous aidera sur votre chemin.

Answer 2

Pour vos questions spécifiques 1 & amp; 2, si vous avez attribué à votre table l'ID "mytable", cet exemple devrait vous indiquer ce que vous recherchez:

var rowIndex = $("#mytable tr").index($(this).parents("tr"));
var inputName = $(this).attr("name");
alert("Input Name: " + inputName + "; RowIndex: " + rowIndex);

Answer 3

Voici un code non testé, qui me vient à l’esprit:

$("#div_s_0 input[type='radio']").onclick = function() {
    if ($("#div_s_0 input[type='radio']:last").attr('checked') == 'checked') {
    /* add a new element */
    }
}

Cela a pour effet d'attacher un événement onclick à chacun des boutons radio du div. Onclick vérifiera si le dernier bouton radio de ce groupe est coché et, le cas échéant, ajoutera un autre élément.

Comme je l’ai dit, cela n’a pas encore été testé. Je ne suis pas sûr du sélecteur (# div_s_0 ...: last ), alors lancez-le d'abord dans Firebug.