Javascript - remplir les zones de texte avec la valeur de case à cocher

Question

Dans mon application web, j'ai une série de cases à cocher qui remplissent un champ de texte au-dessus (si plus d'une case est cochée, leurs valeurs apparaissent dans la zone de texte séparées par des virgules) .

Ces ensembles de cases à cocher s'affichent sous la forme de lignes dans ma table HTML.

Voici mon code HTML.

<input type="text" id="newContactComment<%=rCount %>" name="newContactComment" size="45"> 

<input type="checkbox" id="commentText<%=rCount %>" name="commentText" value="<%=c.getComment_text() %>" 
     onclick="javascript:updateTextArea(<%=rCount%>);"> 

Et la fonction JS correspondant est comme suit:

function updateTextArea(rCount) { 
    var allVals = new Array();   
    $("#contactInfo input['commentText' + rCount]:checked").each(function() { 
     (allVals).push($(this).val()); 
    }); 

    $("#newContactComment" + rCount).val(allVals); 
} 

Le RCount variable dans la fonction ci-dessus est le # de la ligne de ma table. En utilisant ce qui précède, je n'obtiens pas le comportement attendu ..
Par ex. Si pour la ligne 1 de ma table, je vérifie chkbox 1 et 2, il est correctement rempli avec les valeurs de ces cases à cocher. Maintenant, pour 2 de ma table, je vérifie seulement chkbox 3, il est rempli avec les valeurs 1,2 et 3 et pas seulement 3 comme je l'espère.

Toute aide sera grandement appréciée.

Answer 1

Il serait préférable d'utiliser jQuery pour définir un gestionnaire d'événements plutôt que de le mettre en ligne.

Vous souhaitez utiliser l'événement onchange et non l'événement onclick.

Si vous ajoutez les noms de classe de cases à cocher (ou tout ce que vous voulez) aux cases suivantes fonctionnera:

$("input.checkboxes").change(function(){ //when checkbox is ticked or unticked 


    var par = $(this).closest("tr")[0]; 
    var parID = par.id; 
    var patt1=/([0-9]+)$/g; 
    var rCount = parID.match(patt1); //Gets number off end of id 

    var allVals = new Array(); 

    //Get all checkboxes in current row that are checked   
    $(par).find("td input.checkboxes:checked").each(function() { 
     allVals.push($(this).val()); 
    }); 

    $("#newContactComment" + rCount).val(allVals); 

    allVals = null; //empty array as not needed 

}); 

Je crois que ce ou quelque chose dans ce sens va faire ce que vous voulez

Answer 2

Vous essayez d'utiliser la variable rCount à partir de la chaîne entre guillemets. Essayez ceci:

$("#contactInfo input['commentText" + rCount + "']:checked")