jQuery .each problem

Question

Brain squeeze and need help,

I have a table with 6 rows that are that can be hidden or visible depending on if a check box is checked. This .each routine works great with one small problem - when the last check box (val="5") is checked and you hit the refresh button the row 6 (with class="hide5") is hidden. This only occurs on the last check box - any other checkbox that is checked stays visible.

$(document).ready(function($) {
    $('input:checkbox').each(
     function(rowIndex){
      if($('#view'+rowIndex).is(':checked') == true){
       $('.hide'+rowIndex).show();
      }
      else if($('#view'+rowIndex).is(':checked') == false){
       $('.hide'+rowIndex).hide();
      }
     }
    );
    $('input:checkbox').click(function () {        
     var row = this.value;
       $('.hide' + row).toggle();
    });
});

The HTML source for the 6^th row is:

<tr class="hide5">
  <td width="175" align="center" style="padding:1px 0px 11px 0px"><br />
    <span>Total</span><br />
    <span>&nbsp;</span><br />
  </td>
  <td width="175" align="center">
    <input class="auto" type="text" id="bwPound" size="18" alt="p8c3pvS" />
  </td>
  <td width="175" align="center">
    <input class="auto" type="text" id="bwPound" size="18" alt="p8c3pvS" />
  </td>
</tr>

Thanks in advance for your help

Bob Knothe

Answer 1

Try this out:

$(document).ready(function($) {
    $('input:checkbox').each(function(rowIndex){
     var $row = $(this);
     if ($row.is(':checked')){
      $('.hide'+rowIndex).show();
     } else {
      $('.hide'+rowIndex).hide();
     }
    });
    $('input:checkbox').click(function () {        
     var row = this.value;
       $('.hide' + row).toggle();
    });
});

Answer 2

The checkbox has id "View5", but the JS references 'view'+rowIndex. IDs are case sensitive.