复选框上的触发事件点击

Question

我再一次遇到了一个jQuery问题，我希望得到一些帮助。

我有一系列的复选框，看起来像这两个：

<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 /> 

我想要做的就是添加一个新的动态记录到以前的表格中点击任何一个时候。我想为点击说明字段的每个人添加名称或ID或其他内容（他们都是一样的）。

这是上表：

<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 /> 

当然，如果该复选框未被选中，我要被删除的行。

我已经试过这一点，但它并没有在所有的行动：

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

而且我也试过这只是附加（一步一个脚印的时间，合适），其中包括触发动态行添加在实际表中的图像点击的实际功能。

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

这也行不通。

我已经看到了一些类似的帖子，但没有人似乎在做什么，我需要做的。

我希望有人对此有一些了解我。

预先感谢您。

Answer 1

您可以检查一个复选框是否被选中与否，执行以下操作：

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

Answer 2

试试这个

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

我已创建了有效的HTML小提琴

working DEMO