Question

I’m having an issue pulling the relative values in .each() loop in jQuery. I have a series of table rows that have an text input and a radio button next to them. I want to loop through each row, and if the radio button is selected, save the value for the text input.

However, so far whenever I run my loop, it seems to recognize that one of the radio values is selected, and then it automatically saves the first input, regardless of which row. I thought that by running through each row, the code would only be executed in that particular rows HTML — I believe it’s touching all the rows instead. Can anyone help?

Here’s my jQuery:

$('#valueTable tbody tr').each( function() {
   //$(this).css('background', 'blue');

   if($('td input[name=DefaultVal]:checked').size() > 0){
       $('td input[name=DefaultVal]:checked').parent().css('background', 'red')
       selectedDefVal = $('td:first-child input[name=valueTextField]').val();
       //alert(selectedDefVal)
   }  else {
      alert('not checked')
   }
  });

Here’s my HTML:

<table border="0" id="valueTable">        
<tr>
     <td width="70%" style="white-space: nowrap;"><input size="80" type="text" name="valueTextField" placeholder="Enter Value" value="" ></td>        
     <td width="70%" class="default_container">Default
        <input type="radio" name="DefaultVal" checked="true" class="defaultValFind" />  
    </td>
</tr>
<tr>
     <td width="70%" style="white-space: nowrap;"><input size="80" type="text" name="valueTextField" placeholder="Enter Value" value="2" ></td>        
     <td width="70%" class="default_container">Default
       <input type="radio" name="DefaultVal" class="defaultValFind" /> 
     </td>
</tr>
 <tr>
     <td width="70%" style="white-space: nowrap;"><input size="80" type="text" name="valueTextField" placeholder="Enter Value" value="fffffff" ></td>        
     <td width="70%" class="default_container">Default
       <input type="radio" name="DefaultVal" class="defaultValFind" /> 
     </td>
 </tr>
 </table>

Answer 1

You need to use something like $(this):

$('#valueTable tbody tr').each(function() {
   if($(this).find('td input[name=DefaultVal]:checked').length){
       $(this).find('td input[name=DefaultVal]:checked').parent().css('background', 'red');
       selectedDefVal = $(this).find('td:first-child input[name=valueTextField]').val();
   }  else {
      alert('not checked')
   }
});