When you have dynamically generated page content, either pulled from a database or otherwise generated on the fly, there are times when you need to target these areas with jQuery.

For this example, six rows of radio buttons for a form are created using a PHP loop. Each unique id is created by concatenating a predefined prefix with a number. It starts at 7 just to be different.

<?php
 for($count = 7; $count <= 12; $count += 1){

  echo "<tr id='row_$count'>";
  echo "<td><input id='radioA_$count' name='radio_$count' type='radio' value='1'";
  if(@$_POST['radio_'.$count]==1){ echo " checked "; }
  echo "/></td>";
  echo "<td><input id='radioB_$count' name='radio_$count' type='radio' value='2'";
  if(@$_POST['radio_'.$count]==2){ echo " checked "; }
  echo "/></td>";
  echo "<td><input id='radioC_$count' name='radio_$count' type='radio' value='3'";
  if(@$_POST['radio_'.$count]==3){ echo " checked "; }
  echo "/></td>";
  echo "<td><input id='radioD_$count' name='radio_$count' type='radio' value='4'";
  if(@$_POST['radio_'.$count]==4){ echo " checked "; }
  echo "/></td></tr>";
 }
?>

jQuery will replace all selected radio buttons with an image on submit. To pull this off, the following information is needed:

• the number of rows (this is a table for a quickie example)
• the first radio button number
• the last radio button number

Each row is numbered dynamically by concatenating the count number with the ‘row_’ prefix string.

<tr id='row_$count'>

Each radio button has a dynamically generated id and name created in a similar fashion as the row.

<input id='radioA_$count' name='radio_$count' type='radio' value='1' />

To get the number of rows, the jQuery size function is used. Count (get size) of ids that begin with ‘row_’. The ‘^’ character means ‘begins with’.

var itemCount = $('[id^=row_]').size();

To get the first radio button number, grab the number associated with the first row. It may not always be 1. The demo begins at 7 and ends at 12 to show you don’t, and sometimes won’t, always start at 1. First, where the id begins with ‘row’, get the first by using filter(‘:first’) and its value of the id attribute by using attr(‘id’).

var firstItem = $('[id^=row_]').filter(':first').attr('id');

Next, the ‘row_’ prefix is pulled off and the remaining substring is the number. The prefix ‘row_’ is put in a variable. Then the prefix is pulled off leaving the number as a substring.

var firstItemPrefix = 'row_';
var firstItemNum = firstItem.substring((firstItemPrefix.length));

Getting the number of the last item is easy. Just add the total number of items to the firstItemNum and subtract 1.

var lastItemNum = (parseInt(itemCount) + parseInt(firstItemNum)) - 1;

Image replacement magic happens when a for loop rolls over the radio buttons and swaps out the selected ones for an image. If the radio button is checked, put the image after it and remove the radio button.

for(var i=firstItemNum; i <= lastItemNum; i++)
    {
        if( $('#radioA_' + i).attr('checked') ) $('#radioA_' + i).after('<img src="img/chk_black.gif" />').remove();
        if( $('#radioB_' + i).attr('checked') ) $('#radioB_' + i).after('<img src="img/chk_blue.gif" />').remove();
        if( $('#radioC_' + i).attr('checked') ) $('#radioC_' + i).after('<img src="img/chk_green.gif" />').remove();
        if( $('#radioD_' + i).attr('checked') ) $('#radioD_' + i).after('<img src="img/star.gif" />').remove();
    }

I use this on a larger scale for paginated results from a database. For the demo, the results are not stored in a database so each time you hit submit, it only replaces the ones you just checked.

Recommended jQuery and PHP reading:

View demo

Download code