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

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(){

    $(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">

    <div class="modal-body">

        <b>Size</b>&nbsp;<small>Pick 1</small>

        <div class="form-check">

            <input class="form-check-input" type="radio" name="radiobutton" id="rbtn1" value="10.00">

            <label class="form-check-label" for="rbtn1">Regular - PHP 10.00</label>

        </div>

        <div class="form-check">

            <input class="form-check-input" type="radio" name="radiobutton" id="rbtn2" value="20.00">

            <label class="form-check-label" for="rbtn2">Large - PHP 20.00</label>

        </div>

        <p>Total: PHP <span class="total">0</span></p>

    </div>

</form>

<form action="#" id="orderform">

    <div class="modal-body">

        <b>Size</b>&nbsp;<small>Pick 1</small>

        <div class="form-check">

            <input class="form-check-input" type="radio" name="radiobutton" id="rbtn3" value="30.00">

            <label class="form-check-label" for="rbtn3">Regular - PHP 30.00</label>

        </div>

        <div class="form-check">

            <input class="form-check-input" type="radio" name="radiobutton" id="rbtn4" value="40.00">

            <label class="form-check-label" for="rbtn4">Large - PHP 40.00</label>

        </div>

        <p>Total: PHP <span class="total">0</span></p>

    </div>

</form>

Answer 2

我无法测试这段代码，但这是想法，你可以尝试一下。

 <input

    onChange="calc(this,<?php $forsize['id']; ?>)"

    class="form-check-input"

    type="radio"

    name="radiobutton"

    id="rbtn2"

    value="10.00">

然后

 <p>Total: PHP <span id="total-<?php echo $forsize['id']; ?>">0</span></p>

和

<script>

function calc(el, id) {

var value = el.value;

    //do the formula then emit the answer to the span total with id

    

    }

        </script>