Question

In my web application, I’ve set of checkboxes which on check populate a textbox above them.(If more than one checkbox is selected, then their values appear in the textbox separated by commas).

These set of checkboxes appear as rows in my HTML table.

Here’s my HTML code.

<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%>);"> 

And the corresponding JS function is as follows:

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

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

The rCount variable in the above function is the row # of my table.
Using this above, I’m not getting the expected behaviour..
For ex. If for row 1 of my table, I check chkbox 1 and 2, it correctly gets populated with values of those checkboxes. Now, for 2 of my table, I check only chkbox 3, it gets populated with the values 1,2 and 3 and not only 3 as I expect it to.

Any help will be greatly appreciated.

Answer 1

It would be better to use jQuery to set an event handler rather than setting it inline.

You want to use the onchange event not the onclick event.

If you add class names of checkboxes (or whatever you want) to the checkboxes the following will work:

$("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

});

I believe this or something along these lines will do what you want