Triggering Event on Checkbox Click

Question

I am once again stuck with a jQuery issue, and I'm hoping for some help.

I have a series of checkboxes that look like these two:

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

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.

This is the previous table:

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

Of course, if the checkbox is unchecked, I want the row to be removed.

I've tried this, but it doesn't act at all:

$(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();
    }
  });
});

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.

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

This does not work either.

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

I'm hoping someone has some insight for me on this.

Thank you in advance.

Answer 1

try this

$("#MultiPointInspection,#TireRotationandBrake ").on('click', function(){
    if($(this).prop("checked"))
    {
        alert('checked');
        $('#atable tr:last').clone().appendTo("tbody");
    }
    else{
        alert('unchecked');
        // remove latest row in table
        $('#atable tr:last').remove();
    }   
});

I have created a fiddle with valid HTML

working DEMO

Answer 2

You can check whether a checkbox is checked or not, by doing the following:

$('#serviceRecommendation input:checkbox.chkclass').on('change', function(e) {
    if($('#' + e.target.id + ':checked').length > 0) {
        // Add the row
    } else {
        // Remove the row
    }
});