如何在選中/取消選擇該行的複選框時添加或刪除表格單元格中的值，嘗試通過Jquery提交值？

Question

下面是表：

<%= form_tag '', :id => "costs" do %> 
<table class="table table-bordered" id="service_cost"> 
    <% @services.each do |service| %> 
    <tbody> 
     <tr> 
      <td><%= check_box_tag :open_service, {}, false, :class => 'checkable' %></td> 
      <td><%= service.phone %></td> 
      <td><%= service.internet %></td> 
      <td></td> 
      <td></td> 
      <td></td> 
      <td></td> 
      <td></td> 
      <td><%= service.house_keeping %> </td> 
      <td>0.0 </td> 
      <td><%= service.laundry %></td> 
      <td><%= text_field_tag "service_cost", service.total, :class => "input-small" %></td> 
     </tr> 
    </tbody> 
    <% end %> 
</table> 
<% end %> 

當表單被提交時，JavaScript進入行動：

$("#costs").submit(function(){ 
    formData=$("#costs").serializeArray(); 
    processFormData(formData) 
    return false; 
}); 

這確保了選擇的複選框表單提交：

$('.checkable').live('change', function() { 
    $(this).parents('form:first').submit(); 
}); 

但，我正在尋找的是添加或刪除基於複選框選擇/取消選擇和提交它的單元格值，請提出一種方法來做到這一點。

Answer 1

不知道是否隱藏將在TD工作如果表中有多個行，但如果它確實是這樣的：

<table> 
    <tr> 
     <td class="data">data</td> 
     <td><input type="checkbox" class="checkable" value="data"></td> 
    </tr> 
</table 

$('.checkable').live('change', function() { 
     $(this).closest('tr.data').hide(); 
     $(this).parents('form:first').submit(); 

}); 

Answer 2

<%= check_box_tag :check %> 
<%= form_tag '', :id => "costs" do %> 
    <%= text_field_tag, :detbycb, :size=>20 %> 
<% end %> 

$('#check').on('change', function() { 
    if ($('#check').is(':checked')) 
     $('#detbycb').val('I Am Checked'); 
    else 
     $('#detbycb').val('I AM NOT checked'); 
} 

OR 

$('#check').on('change', function() { 
    if ($(this).is(':checked')) 
     $('#detbycb').val('I Am Checked'); 
    else 
     $('#detbycb').val('I AM NOT checked'); 
} 

The first better illustrates, the second is the real way, faster execution