計數選擇複選框

的總價格，我有這部分代碼：計數選擇複選框

<form action="{{ URL::action('server-shop-post') }}" method="post" id="cart"> 
    <table class="table table-responsive"> 
     <thead> 
      <tr><th>Check</th><th>Item</th><th>Pixel Points <span class="fa fa-cubes"></span></th></tr> 
     </thead> 
     <tbody> 
      @foreach($shopItems as $shopItem) 
       <tr> 
        <td> 
         @if(!in_array($shopItem -> id, $userPurchases)) 
          <input form="cart" name="cart[]" value="{{ $shopItem -> id }}" type="checkbox"> 
         @else 
          <span class="glyphicon glyphicon-ok"></span> 
         @endif 
        </td> 
        <td> 
         {{ $shopItem -> name }} 
        </td> 
        <td> 
         {{ $shopItem -> cost }} 
        </td> 
       </tr> 
      @endforeach 
      <tr><td colspan="2">You have <span class="fa fa-cubes"></span> {{ Auth::user() -> pixel_points }}</td><td>Total cost: 200</td></tr> 
     </tbody> 
    </table><input type="submit"> 
</form>

這裏做的事情，是創建一個完整的商店物品表，並允許人們檢查複選框「添加到購物籃」。然後，價格也會顯示在與複選框相同的行中。我的目標是讓用戶檢查一個項目，以及總成本更新。如何將所有值一起添加到勾選框中？

來源

2014-11-03 Darryl Chapman

看看這個問題。我在那裏提出了一個答案：[http://stackoverflow.com/questions/26702514/how-do-i-get-my-checkbox-values-and-option-values-to-add-up-and-enter-the -sum入/ 26702588 noredirect = 1＃comment42018025_26702588] [1] [1]：http://stackoverflow.com/questions/26702514/how-do-i-get-my-checkbox- value-and-option-values-to-add-up-and-enter-the-sum-in/26702588？noredirect = 1＃comment42018025_26702588 – Tom 2014-11-03 21:05:33

您需要使用Javascript來迭代表格併合計總金額。我可能會爲此使用jQuery。喜歡的東西：

var total = 0; 
$('input[name="cart[]"]').each(function(item){ 
    total += item.val(); 
}

這假設輸入元素包含在「值」屬性的價格。

來源

2014-11-03 21:05:05

我認爲它不是一個好主意，可以遍歷整個列表..因爲你可以添加一個事件處理程序到複選框，並根據它是否被選中或未選中來操作總數。 – shakirthow 2014-11-03 21:10:27

我認爲類似的東西，但我有複選框的值的項目ID意味着我不能這樣做？ – 2014-11-03 21:21:54

@shakirthow好點，我錯過了這個問題。我認爲你的回答比較好，但我的方法可能對與OP有類似問題的人有用，但是由於需要每次（或按需）計算全部金額而受到限制 – 2014-11-04 04:19:02

遍歷所有列表項可能是昂貴的，如果它是一個巨大的列表..所以綁定一個「onchange」事件處理程序到每個複選框。

$(".aCommonClass").change(function() { 
    //check if it was checked or unchecked. 
    //based on that, add or sub the value from the total 
});

來源

2014-11-03 21:09:08 shakirthow

就像其他答案一樣，wouldnt這依賴於輸入的價值是價格嗎？鑑於我有身份證。 – 2014-11-03 21:23:38

是的，這取決於你的實施。因此，可以說你使用ID作爲值，然後爲諸如「cost_ {{$ shopItem - > id}}」之類的成本添加一個「id」屬性，然後使用上面的變更函數，當有變化時。從「成本_ + $（this）.val（）」中選擇文本值，這是成本的「id」..然後您可以輕鬆選擇數據並添加或減去..記住從文本轉換爲數字添加/分... – shakirthow 2014-11-03 21:31:33

我明白你在說什麼。不過，我在表單提交中使用了ID，我用它創建了一個數組。 – 2014-11-03 21:37:45

我已經創建了一個適用於我的案例的解決方案。真的不知道它有多可靠，它看起來工作得很漂亮。

<script> 

    var cartTotal = 0; 
    var fieldId; 

    $('.tickbox').change(function(){ 
     fieldId = $(this).val(); 
     var value = parseInt(document.getElementById(fieldId).innerHTML); 
     if($(this).is(":checked")) { 
      cartTotal += value; 
      document.getElementById('cart-total').innerHTML = "Total cost: " + cartTotal; 

     } else { 
      cartTotal -= value; 
      document.getElementById('cart-total').innerHTML = "Total cost: " + cartTotal; 
     } 
    }); 
</script>

我希望我能解釋它是如何工作的，但我真的不知道。我會標記幫助我創建答案的答案。

來源

2014-11-03 22:51:02

計數選擇複選框

回答

相關問題