jQuery plusieurs boutons radio

Question

Nouveauté de javascript/jquery et ayant du mal à 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 sont cochées 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> 

Je suis en train d'écrire une fonction jQuery pour ajouter une nouvelle ligne à la table à chaque fois que l'utilisateur sélectionne un bouton radio, mais seulement si elles sont actuellement sur le dernière rangée de la table. Ce que je voudrais faire 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 dans la table. Si elles sont égales, ajoutez une nouvelle ligne, sinon, ne faites rien.

Ma question est double, selon la façon dont j'attaquer ceci:

1) Comment puis-je retourner l'attribut nom d'un bouton radio ou 2) Comment puis-je retourner l'index de ligne de la ligne I suis actuellement en?

Answer 1

Cela vous obtiendrez 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 

Espoir Cela vous aide sur votre chemin.

Answer 2

est ici un code non testé, du haut de ma tête:

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

Qu'est-ce qui ne fait attacher un événement onclick à chacun des boutons radio dans la div. Onclick va vérifier si le dernier bouton radio de ce groupe est coché, et si c'est le cas, ajoutez un autre élément.

Comme je l'ai dit, il 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.

Answer 3

Pour vos questions spécifiques 1 & 2, si vous avez donné votre table une carte d'identité de « mytable », cet exemple devrait vous donner ce que vous cherchez:

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