自动添加复选框值并保留其名称以存储在数据库中

Question

我从我的数据库中检索到相应的 item_name 和 value 的复选框恰好正确显示，但是在选择/选中时会自动添加/减去这些值。但是，我想保存选定的复选框 item_names 以及复选框中的值的总和。我无法做到这一点，因为 value 选项包含应该是复选框 item_name 的数字数据；到目前为止，这是我所拥有的。

    <script type="text/javascript">
    function checkTotal() {
        document.listForm.total.value = '';
        var sum = 0;
        for (i=0;i<document.listForm.sel_car.length;i++) {
          if (document.listForm.sel_car[i].checked) {
            sum = sum + parseInt(document.listForm.sel_ca[i].value);
          }
        }
        document.listForm.total.value = sum;
    }
</script>

HTML/PHP 代码段

    <h4>Available Cars | Click on desired car(Multiple Selections enabled) | Total Price: <input type="text" size="2" name="total" value="0"/></h4>
        <div class="form-group">

        <?php

    $stmt = $DB_con->prepare('SELECT * FROM cars ORDER BY car_id DESC');
    $stmt->execute();

    if($stmt->rowCount() > 0)
    {
        while($row=$stmt->fetch(PDO::FETCH_ASSOC))
        {
            extract($row);
            ?>  
        <div class="col-md-3"><label class="btn btn-primary">
            <img src="user_images/<?php echo $row['userPic']; ?>" alt="..." class="img-thumbnail img-check"><input type="checkbox" name="sel_car[]" id="item4" value="<?php echo $row['car_price']; ?>" class="hidden" autocomplete="off"  onchange="checkTotal()"/>
            <h5><?php echo $row['se_car_model']; ?> | UGX <?php echo $row['car_price']; ?>/=</h5>
            </label></div>

<?php
        }
    }
?>

Answer 1

您还应该检索 id 以及项目名称和值，并将 id 分配给复选框。

在表单中添加隐藏字段

<input type="hidden" name="itemsArr" id="itemsArr" value="">

复选框

<input onclick="checkTotal(this)" type="checkbox" id="itemId" name="ItemName" value="ItemPrice"> 

Div 显示总量

<div id="totalDiv"></div>

脚本

<script type="text/javascript">
var arr = [];
var total = 0;
function checkTotal($this)
    {
        var varId= $this.id;
        if ($($this).is(":checked")) {
            arr.push(varId);
        }
        else
        {
            arr.splice( $.inArray(varId,arr) ,1 );
        }
        $("#itemsArr").val(arr);

        // get the price of the item from the controller by passing id to controller

        $.ajax({
            type: 'POST',
            url: BASE_URL+"controllerName/methodName",
            data: {'id':varId},
            success: function (data) {
                data = JSON.parse(data);
                total += data.price;

                $("#totalDiv").html(total);
            }
        });
    }

在提交表单时，您将获得隐藏的值，然后将其存储在数据库中

当您想从数据库中检索值时，您可以获取字段并使用explode 函数将该字符串转换为数组并执行进一步的任务。