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

试试这个

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

Answer 2

您可以通过执行以下操作来检查复选框是否已选中：

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

在复选框上触发事件单击

2 个答案: