Triggering Event on Checkbox Click
<p>I am once again stuck with a jQuery issue, and I'm hoping for some help.</p>

<p>I have a series of checkboxes that look like these two:</p>

<pre><code>&lt;input type="checkbox" name="MultiPointInspection" id="MultiPointInspection" class="MultiPointInspection chkclass" value="&lt;?php echo $MultiPointInspection; ?&gt;" onKeyPress="return disableEnterKey(event)" /&gt;&amp;nbsp;Multi Point Vehicle Inspection&lt;br /&gt;
&lt;input type="checkbox" name="TireRotationandBrake" id="TireRotationandBrake" class="add_to_total TireRotationandBrake chkclass" value="&lt;?php echo $TireRotationandBrake; ?&gt;" onKeyPress="return disableEnterKey(event)" /&gt;&amp;nbsp;Tire Rotation and Brake Inspection&lt;br /&gt;
</code></pre>

<p>What I want to do is add a new dynamic row to a previous table when any of these are clicked.  And I want to add the name, or id or whatever (they're all the same) for each one that is clicked into the description field.</p>

<p>This is the previous table:</p>

<pre><code>&lt;table id="atable" class="atable"&gt;
&lt;tr&gt;
&lt;thead&gt;
&lt;th&gt;Description&lt;/th&gt;&lt;th&gt;Stocked&lt;/th&gt;&lt;th&gt;Quantity&lt;/th&gt;&lt;th&gt;Part Price&lt;/th&gt;&lt;th&gt;Hours&lt;/th&gt;    &lt;th&gt;Rate Class&lt;/th&gt;&lt;th&gt;Total&lt;/th&gt;&lt;th&gt;Approved&lt;/th&gt;&lt;th&gt;Remove Row&lt;/th&gt;&lt;/tr&gt;&lt;thead&gt;
&lt;tbody&gt;
&lt;tr class="dynamic_row"&gt;
&lt;td&gt;&lt;input name="description[]" id="description" value="&lt;?php echo $description; ?&gt;" size="55" class="numeric add_to_total description" onKeyPress="return disableEnterKey(event)" /&gt;
&lt;/td&gt;&lt;td align="center"&gt;&lt;input type="checkbox"  name="stocked[]" id="stocked" value="&lt;?php echo $stocked; ?&gt;" size="5" class="numeric add_to_total" onKeyPress="return disableEnterKey(event)" /&gt;
&lt;/td&gt;&lt;td&gt;&lt;input name="quantity[]" id="quantity" value="&lt;?php echo $quantity; ?&gt;" size="5" class="numeric add_to_total quantity" onKeyPress="return disableEnterKey(event)" /&gt;
&lt;/td&gt;&lt;td&gt;&lt;input name="partPrice[]" id="partPrice" value="&lt;?php echo $partPrice; ?&gt;" size="10" class="numeric add_to_total part" onKeyPress="return disableEnterKey(event)" /&gt;
&lt;/td&gt;&lt;td&gt;&lt;input name="hours[]" id="hours" value="&lt;?php echo $hours; ?&gt;" size="10" class="numeric add_to_total hours" onKeyPress="return disableEnterKey(event)" /&gt;
&lt;/td&gt;&lt;td&gt;&lt;select name="rate[]" id="rate" class="numeric add_to_total rate" onKeyPress="return disableEnterKey(event)"&gt;
&lt;?php
//get data from database for this field
?&gt;
&lt;/select&gt;
&lt;/td&gt;&lt;td&gt;&lt;input name="total[]" id="total" size="10" class="numeric is_total" readonly="readonly" onKeyPress="return disableEnterKey(event)" /&gt;
&lt;/td&gt;&lt;td align="center"&gt;&lt;input type="checkbox" name="approved[]" id="approved" class="add_to_total approved" checked="checked" value="&lt;?php echo $approved; ?&gt;" size="10" onKeyPress="return disableEnterKey(event)" /&gt;
&lt;/td&gt;&lt;td align="center"&gt;&lt;img src="img/x.png" width="25" height="25" id="removeButton" title="Remove Row" class="delRow" /&gt;
&lt;/td&gt;&lt;/tr&gt;&lt;tbody&gt;
&lt;tfoot&gt;&lt;t&lt;tr&gt;&lt;td colspan="9" align="left" bgcolor="#FFFFFF" border="0"&gt;&lt;img src="img/plus.png" width="25" height="25" id="btnAddRow" title="Add New Row" class="alternativeRow" /&gt;
&lt;/td&gt;&lt;/tr&gt;&lt;tfoot&gt;
&lt;/table&gt;&lt;br /&gt;
</code></pre>

<p>Of course, if the checkbox is unchecked, I want the row to be removed.</p>

<p>I've tried this, but it doesn't act at all:</p>

<pre><code>$(function(){
$("#serviceRecommendation input:checkbox.chkclass").click(function(){
    if ($(this).is(":checked"))
    {
  $(this).closest("tr").clone().appendTo("#atable");
    }
    else
    {
      var index = $(this).closest("tr").attr("data-index");
      var findRow = $("#atable tr.dynamic_row");
      findRow.remove();
    }
  });
});
</code></pre>

<p>And I've also tried this for just the add (one step at a time, right), which includes the actual function that triggers the dynamic row add on an image click in the actual table.</p>

<pre><code>$(".MultiPointInspection").bind('click',function(){
    if($(this).is(":checked"))
    {
    (".alternativeRow").btnAddRow({oddRowCSS:"oddRow",evenRowCSS:"evenRow"}).trigger();
    $(this).find(".description").val("Multi-Point Vehicle Inspection");
    }
});
</code></pre>

<p>This does not work either.</p>

<p>I've seen some similar posts, but none of them seem to be doing what I need to do.</p>

<p>I'm hoping someone has some insight for me on this.</p>

<p>Thank you in advance.</p>
