自动计算所选单选按钮的总和

Question

我一直在尝试自动计算所选单选按钮的总和。单选按钮的值来自数据库。这是我到目前为止所尝试过的。它仅适用于第一个模式。这是手动刺激数据的片段的链接。

https://jsfiddle.net/k5zh9m4d/1/

<section class="py-5">

      <div class="container">

        <h1 class="display-4">Menu</h1>

          <?php 

          include "config/dbconfig.php"; 

          $data['productCode'] = "0"; // sample data

          $stmt = $conn->prepare("SELECT * FROM tbl_products");

          //$stmt->bind_param("i", $data['productCode']);

          $stmt->execute();

          foreach ($stmt->get_result() as $i => $stuff) { ?>

            <div class="row">

              <div class="col-6">

                <img src="<?php echo $stuff['image']; ?>" class="img-fluid" alt="Sample milk tea">

              </div>

              <div class="col">

                <h3><?php echo $stuff['itemname']; ?></h3>

                <p><?php echo $stuff['itemdescription']; ?></p>

                <hr>

                <h4>

                  <button type="button" class="btn btn-secondary btn-lg" disabled>

                  <i class="fa fa-glass fa-lg" aria-hidden="true"></i>

                  <?php echo $stuff['itempricethree']; ?>

                  </button>

                </h4>

                <br>

                <hr>

                <button type="button" class="btn btn-outline-danger btn-lg" data-toggle="modal" data-target="#<?php echo $stuff['itemcode']; ?>">

                  <i class="fa fa-cart-plus" aria-hidden="true"></i>

                  Order

                </button>

              </div>

            </div>

        <br><br>

Answer 1

您有两个spanid 为 的元素total。因此，第二个模态的总值显示在第一个模态中，因为这是totalDOM 中第一个 id 的元素。为您的总跨度指定一个类而不是 ID，然后搜索form与单击的单选按钮最接近的。span然后求出属于它的总数。此外，由于一次只能有一个单选按钮处于活动状态，因此无需遍历所有单选按钮。只需输出所选无线电输入的值即可。$(":radio").on("change", function(){&nbsp; &nbsp; $(this).closest('form').find('.total').text(Number(this.value));});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><form action="#" id="orderform">&nbsp; &nbsp; <div class="modal-body">&nbsp; &nbsp; &nbsp; &nbsp; <b>Size</b>&nbsp;<small>Pick 1</small>&nbsp; &nbsp; &nbsp; &nbsp; <div class="form-check">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input class="form-check-input" type="radio" name="radiobutton" id="rbtn1" value="10.00">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <label class="form-check-label" for="rbtn1">Regular - PHP 10.00</label>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="form-check">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input class="form-check-input" type="radio" name="radiobutton" id="rbtn2" value="20.00">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <label class="form-check-label" for="rbtn2">Large - PHP 20.00</label>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; <p>Total: PHP <span class="total">0</span></p>&nbsp; &nbsp; </div></form><form action="#" id="orderform">&nbsp; &nbsp; <div class="modal-body">&nbsp; &nbsp; &nbsp; &nbsp; <b>Size</b>&nbsp;<small>Pick 1</small>&nbsp; &nbsp; &nbsp; &nbsp; <div class="form-check">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input class="form-check-input" type="radio" name="radiobutton" id="rbtn3" value="30.00">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <label class="form-check-label" for="rbtn3">Regular - PHP 30.00</label>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="form-check">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input class="form-check-input" type="radio" name="radiobutton" id="rbtn4" value="40.00">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <label class="form-check-label" for="rbtn4">Large - PHP 40.00</label>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; <p>Total: PHP <span class="total">0</span></p>&nbsp; &nbsp; </div></form>

Answer 2

我无法测试这段代码，但这是想法，你可以尝试一下。&nbsp;<input&nbsp; &nbsp; onChange="calc(this,<?php $forsize['id']; ?>)"&nbsp; &nbsp; class="form-check-input"&nbsp; &nbsp; type="radio"&nbsp; &nbsp; name="radiobutton"&nbsp; &nbsp; id="rbtn2"&nbsp; &nbsp; value="10.00">然后&nbsp;<p>Total: PHP <span id="total-<?php echo $forsize['id']; ?>">0</span></p>和<script>function calc(el, id) {var value = el.value;&nbsp; &nbsp; //do the formula then emit the answer to the span total with id&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; </script>