Jquery-具有多个复选框值的动态行

时间:2014-01-12 14:23:21

标签: jquery html checkbox row

我正在创建一个购物车,用户可以通过在表格中创建新行来动态添加项目。每行有3个复选框,我需要根据复选框值执行计算。我已经为行指定了一个类名data_row,并且我将复选框作为

来访问它们
$('.data_row').each(function(){

$(this).find('input:checked').each(function(){

------
});
});

这是html代码

<tr class="data_row" >
    <td><input type="text" class="form-control" placeholder="Quantity" style="width:100px; margin-top:25px"></td>

    <td><input type="text" class="form-control" placeholder="Item Description" style="width:150px;display:inline-block" >

  <span class="checkbox" style=" margin-left:10px; display:inline-block">
    <input type="checkbox" class="item_type" value="General"> General Goods<br>
    <input type="checkbox" class="item_type" value="Import">Import<br>
    <input type="checkbox" class="item_type" value="BFM">Books,Food, Medical Products
  </span>

      </td>
    <td><input type="text" class="form-control price" placeholder="Price" style="width:100px;margin-top:25px"></td>    
    </tr>

我使用jquery clone作为

动态插入新行
$(document).on('click','.add',function () {

        $('table tbody>tr.data_row:last').clone(true).find('input').val('').end().find('input[type=checkbox]').removeAttr('checked').end().insertAfter('table tbody>tr.data_row:last');
    return false;

  });

问题是找到复选框值的内部循环显示每行的相同数据,而不是该行的特定复选框值。我无法理解。如果您需要在此处查看完整代码,请访问链接http://plnkr.co/edit/dUlp7CoBtOOhzmV7LG2A?p=info

1 个答案:

答案 0 :(得分:0)

朋友,它非常简单.. 我们需要得到特定的文本框..

例如,

您的费用行文本框ID为101,在这种情况下,01为常量,然后应用1以更改

在改变函数上写一些像这样的东西

function getid(obj){
   var i = obj.id.split("01")[0];
   var val = obj.value;
   //now comes to calculation part
   var total += val;
}