0

私はjQueryの初心者で、おそらく簡単な答えですが、チェックボックスがオンになっている場合、価格と数量を計算しようとしています。アイテムのリストをループし、ユーザーがチェックボックスを選択して数量を入力すると、最後のセルに合計したいと思います。

<table>
<tr>
<td width="10%">&nbsp;</td>
<td width="80%">Item</td>
<td width="10%">Price</td>
<td width="10%">Quantity</td>
<td width="10%">Total</td>
</tr>


<tr>
<td > <input type="checkbox" name="Extras" value="id" checked="no"></td>
<td >ItemName</td>
<td><cfinput type="text" name="quantity" class="quantity" size="4"></td>
<td>#Extras.Price #</td>
<td><span id="total"></span></td>
</tr>

</table>

これまでのところ、私のjQueryには次のものがあります。

$(document).ready(function() {

  $("input[type=checkbox]:checked").each (function (){
    // not sure what to put here    
  });

});

助けてくれてありがとう！

4

5 に答える 5

1

@ erik1001の答えにはすべてがあります。次の変更のみを行います。

「クリック」の代わりに「オン」を使用します。

$('input:type=checkbox').on('click',function(){});

関数を変数として格納します。複数のイベントから再利用できるように：

var runthis = function(){};
$('input:type=checkbox').on('click',runthis);
$('input.quantity').on('change',runthis);
于 2012-11-19T21:48:33.633 に答える
1

このようなことをしようとしていると思います。ここで確認してください：http://jsfiddle.net/vNg9v/2/

脚本：

$(document).ready(function() {
    var totalQ = $('#total-q'),
        totalT = $('#total-t'),
        valQ = 0,
        valT = 0;
    $('input:checkbox').change(function () {
        var $this = $(this),
            parentRow = $this.closest('tr'),
            totalCell =             parentRow.find('.total'),
            price = parseFloat(parentRow.find('.price').html()),
            quantity = parseFloat(parentRow.find('.quantity').val()),
            total = price * quantity;


        if ($this.prop('checked') === true)
        {
            totalCell.html(total);
            valQ += quantity;
            valT += total;
        }
        else
        {
            valQ -= quantity;
            valT -= total;
            totalCell.text('')   
        }           
        totalQ.html(valQ);
        totalT.html(valT);    
    });
});​

HTML:

<table>
    <tr>
        <td width="10%">&nbsp;</td>
        <td width="80%">Item</td>
        <td width="10%">Price</td>
        <td width="10%">Quantity</td>
        <td width="10%">Total</td>
    </tr>
    <tr>
        <td > 
            <input type="checkbox" name="Extras" value="id" />
        </td>
        <td>ItemName</td>
        <td class="price">12.10</td>
        <td>
            <input name="quantity" class="quantity" size="3" value="0" />
        </td>
        <td class="total"></td>
    </tr>
    <tr>
        <td colspan="3">TOTAL</td>
        <td id="total-q">0</td>
        <td id="total-t">0</td>
    </tr>
</table>​

今、これはまさにあなたが望むものであるべきですか？

于 2012-11-19T03:15:47.250 に答える
0

これは、現在の組織を使用すると、非常に面倒で、すぐに発生する可能性があります。ただし、jQuery.parentとjQuery.childrenの組み合わせを使用して、必要なものを取得できます。

最初に、要素を変更してクラスを使用します。これは、サンプル コードに複数の行があるように思われるためです。

<td class="price">#Extras.Price #</td>
<td><span class="total"></span></td>

次に、.each関数で、クリック イベント ハンドラーを各チェックボックスにバインドします。

$(document).ready(function() {

  $("input[type=checkbox]:checked").each (function (){
    $(this).on('click', function(e) { // bind click event
      var $row = $(this).parent('tr'); // <tr> element
      var total = $row.children('.quantity').val() 
          * parseInt($row.children('.price').val());
      $row.children('.total').html(total);
    });
  });
});

正直なところ、jQuery が<cfinput>要素をピックアップするかどうかはわかりません。

于 2012-11-19T03:07:58.613 に答える
0

私はあなたのhtmlを次のように少し片付けようとします:

<tr>
   <td> <input type="checkbox" name="Extras" value="id" checked="no" class="theCheckboxItem"></td>
   <td>ItemName</td>
   <td><cfinput type="text" name="quantity" class="quantity" size="4"></td>
   <td class="priceContainer">#Extras.Price #</td>
   <td class="totalContainer"><span id="total"></span></td>
</tr>

そしてjqueryは次のようになります：

  var totalVal = "";
  var qty, price;
  $("input.theCheckboxItem:checked").each (function (){
    qty = $(this).parent().parent().find('.quantity').val();
    price = $(this).parent().parent().find('.priceContainer').text();

    totalVal = parseInt(qty) * parseInt(price);
    $(this).parent().parent().find('.totalContainer').text(totalVal);
  });
于 2012-11-19T03:10:08.483 に答える