テーブルの列の各行をループし、チェックされている場合に対応するチェックボックスの値を他の列から取得する

-1

updateTotal関数が（チェックボックスをオンまたはオフにして）トリガーすると、itemprice列をループし、 tditemカラムにある対応するチェックボックスがチェックされている場合は、変数totalPriceにそれを追加します。そうでない場合は、itempriceの値をtotalPriceに追加しないでください。テーブルの列の各行をループし、チェックされている場合に対応するチェックボックスの値を他の列から取得する

var totalPrice = 0; 

window.updateTotal = function (element) { 
    var jqEl = $(element); 
    var isChecked = jqEl.prop('checked') === true; 
    totalPrice = isChecked ? totalPrice += parseInt(jqEl.attr('data-price')) : totalPrice -= parseInt(jqEl.attr('data-price')); 

    $('#total').val(totalPrice); 
} 

function init() { 
    var elements = $('input[name="selectedItems"]'); 

    elements.each(function (index, item) { 
     var element = $(item); 
     var isChecked = element.prop('checked'); 

     totalPrice = isChecked ? totalPrice += parseInt(element.attr('data-price')) : totalPrice; 
    }); 
    $('#total').val(totalPrice); 
}; 

init();

怒鳴るコード上

<table id="tblItem"> 
    <body> 
     <tr> 
      <td class="hidden" id="tditemid"></td> 
      <td id="tditem"> 
       <input type="checkbox" id="chckItemId" name="selectedItems" checked="checked" onclick="updateTotal(this)" /> 
       <label id="lblitem"></label> 
      </td> 
      <td id="itemprice"></td> 
      <td class="hidden" id="tdstatus"></td> 
     </tr> 
    </body> 
</table> 

<input class="form-control input-sm" id="total" name="totalprice" readonly="true" type="text" value="">

Javascriptを

//Update total textbox when checkbox is checked/unchecked 
window.updateTotal = function (element) { 
    var totalPrice = 0.00; 
    //Get clicked dropdown row and col id 
    var chckRow = element.parentNode.parentNode.rowIndex; 
    var chckCol = element.parentNode.cellIndex; 
    //What to do?? 

    //Display total price 
    $('#totalprice').val(totalPrice); 
}

出典

2016-11-09 Harambe Attack Helicopter

あなたが何かを書き込もうとしましたか？どこに問題がありますか？ – Dekel

テーブルをループして、チェックボックスの付いた列がチェックされているかどうかをチェックする必要があります。チェックされている場合は、対応する価格列を取得し、 'totalPrice'変数に追加します。そうでない場合は、無視して次の行に進みます。今まで、私はまだそれについて研究しています –

ルックあなたがtotalPrice変数を作成する必要があります。次に、私はdata-price属性を作成して、HTML DOM要素の操作性を向上させます。あなたはelement.parent. ....のようなものを使う必要はありません。これは良いアプローチではないからです。 init関数はコンストラクタに似ており、アプリケーションの開始時に実行されるか、それは何ですか？

はここにあるあなたのJSfiddle

出典

2016-11-10 11:16:44 Franky238

あなただけの確認入力を選択し、自分の親の兄弟.itemprice要素「値」に基づいて合計を計算することができます。

#idも1つしかないので、.itempriceのクラスを複数の要素に使用できます。

//Update total textbox when checkbox is checked/unchecked 
window.updateTotal = function (element) { 
    var totalPrice = 0.00; 

$("input:checked").each(function(){ 
    totalPrice += parseFloat($(this).parent().next('.itemprice').text()); 
}); 

    $('#totalprice').val(totalPrice); 
}

DEMO

出典

2016-11-10 11:28:54

テーブルの列の各行をループし、チェックされている場合に対応するチェックボックスの値を他の列から取得する

答えて

関連する問題