使用用户输入更改或更新复选框值答案

【问题标题】：Change or update checkbox values using user inputs使用用户输入更改或更新复选框值
【发布时间】：2019-04-04 09:12:09
【问题描述】：

我目前正在做一个 WordPress 项目，我有一个使用 WooCommerce 建立的网上商店，作为一个实践项目，我决定制作退款系统供客户使用，他们可以在其中发送“退款请求”为网站管理员接受或拒绝。

退款选项卡分为 3 个不同的页面，在第一页，客户通过输入姓名、邮政编码和订单号来确认他/她的订单，在第二页，客户可以选择他们想要订购的产品和他们的数量通过输入数字，并检查产品的复选框和第三页只是一个确认页面，客户也可以发送消息，然后他们按下“发送请求按钮”。按下按钮后，请求选项卡中的信息将插入到名为 wp_refundrequests 的自定义表中，该表用于在管理页面上显示所有请求。

我的问题是，在第二页上，客户应该选择他们想要退款的某些产品的数量，总是在我的代码中显示最大数量，我无法弄清楚如何为了使它工作，它只需要用户输入的金额。

这是第二页的代码，问题出在：

<div class="Etusivu">
    <form action="" method="post" style="border:0px solid #ccc">
<legend><b>Product refund</b></legend>
          <div class="step">
        <legend>Step 2/3</legend>
      </div>
      <br />
          <p class="important">Order information</p>
          <br />
          <div class="valitse">

        <p class="important">Choose all of the products you want to refund.</p>
      </div>
        <hr>

        <script>
        //function for making a checkbox to check all checkboxes
        function toggle(source) {
          checkboxes = document.getElementsByName('productinfo[]');
          for(var i=0, n=checkboxes.length;i<n;i++) {
            checkboxes[i].checked = source.checked;
          }
        }
        </script>
          <input type='checkbox' onClick='toggle(this)' />

        <p class="selectall">Select all products</p>

        <label>The order:</p>
        <br />
        <?php
        //Gets and displays data based on certain variables from the database, connects quantity and product name into one string in
        $order = wc_get_order( $ordernumber );

        foreach ($order->get_items() as $item ){

          $unitprice = $item->get_total() / $item->get_quantity();
  // This is the part that currently gets the quantity value for the next page/the refund request
          echo "<input type='checkbox' name='productinfo[]' value='" . " " . $item->get_name() . "  ,  " . $item->get_quantity() . " QTY" . " | " . $item->get_total() ."'>";
          echo '<p>';
          echo __('Product name: ' ) . $item->get_name() . '<br>';
          if($item->get_quantity() > 1) {
            echo "Quantity: " . "<input type='number' name='numberqty' value='" . $item->get_quantity() . "'max='" .$item->get_quantity() . "' min='1' > " . "<br/>";
          }
          else {
          echo __('Quantity: ' ) . $item->get_quantity() . '<br>';
        }
        if ($item->get_quantity() > 1) {

          echo __('Product price: ') . $unitprice . '€' . '<br/>';
        }
          echo __('Products total: ' )  . wc_price($item->get_total()) . '</p>' . '<br/>';
       }
        echo '<p>'. __('Order total: ') . $order->get_total() . '</p>';
        ?>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


        <input type="submit" id='check' value="Next"/>
        <script>
        //Checks if any checkboxes have been checked, if not, displays an error
        function checkBoxCheck() {
          if($('input[name="productinfo[]"]:checked').length) {
            console.log("at least one checked");
            return true;
          }
          else {
            alert("Select at least 1 product.");
            return false;
          }
        }
        //runs the script for checking the checkboxes
        $('#check').on('click', checkBoxCheck);
      </script>
        </label>
          <input type="hidden" name="page" value="2">
    </form>
    <br />
</div>
</body>
</html>
<?php

编辑：为了更清楚地说明这一点，这里的问题是我正在制作一个客户可以用来退回一些产品的系统，在页面 2/3 上，我目前遇到问题，用户可以查看他的订单包含的所有产品，并且所有产品都有自己的复选框，因此用户可以选择他们想要退款的产品。现在，当用户选择产品并按下“下一步”时，选择的信息将显示在下一页 3/3 上。该页面上显示的值是产品名称、产品价格和产品数量。但是，QUANTITY 始终与客户订购的数量相同，并且在 2/3 页面（用户选择要退款的产品的位置）上，我希望能够输入我想要的某些产品的数量退款，并在复选框数组上有这个值。

例如。我买了 5 根电缆，但我只想退回其中的 2 根，所以我在我的输入字段中输入了 2。

【问题讨论】：

您希望它默认显示什么值？（另外，您在代码中的 'max=' 之前缺少一个空格。它当前是 value='" . $item->get_quantity() . "'max='" .$item->get_quantity() . "'，您可能希望它是 value='" . $item->get_quantity() . " 'max='" .$item->get_quantity() . "'）
@dpDesignz 老实说，默认值并没有太大关系，该字段甚至可以默认为空，只要它有效。现在我只是做了它，以便它显示客户在订单中的物品数量。谢谢，我也会编辑那个位：P
您能否更详细地解释一下现在发生了什么以及您希望发生什么？
@dpDesignz 当然！所以现在，当用户选择页面上的一个复选框时（如果有多个产品，每个产品都有一个复选框），并且当用户选中其中一个框并按下“下一步”时，他就会被重定向到另一个页面，在那里他可以确认他要退回的物品，以及信息是否正确。现在复选框附带的信息是所选产品的名称、价格和这些项目的数量。但数量始终与用户购买这些商品的数量相同。
@dpDesignz 例如，如果用户购买了 5 根电缆，并且只想退 3 根电缆，他不能这样做，因为系统只允许他一次全部退还.所以基本上我希望能够通过用户输入来更改复选框的值（或者如果有其他方法可以做到这一点，请告诉我）。所以当用户输入例如。输入字段上的“2”，数量值将是 2，而不是用户订购的最大值 5。这有意义还是我仍然感到困惑？

标签： javascript php wordpress woocommerce

【解决方案1】：

首先，您必须更改以下内容：

      echo "<input type='checkbox' name='productinfo[]' value='" . " " . $item->get_name() . "  ,  " . $item->get_quantity() . " QTY" . " | " . $item->get_total() ."'>";

到

      echo "<input type='checkbox' class='" . $item->get_id() . "checkBox' name='productinfo[]' value='" . " " . $item->get_name() . "  ,  " . $item->get_quantity() . " QTY" . " | " . $item->get_total() ."'>";

还有这个：

      if($item->get_quantity() > 1) {
        echo "Quantity: " . "<input type='number' name='numberqty' value='" . $item->get_quantity() . "'max='" .$item->get_quantity() . "' min='1' > " . "<br/>";
      }

到这里：

      if($item->get_quantity() > 1) {
        echo "Quantity: " . "<input type='number' class='" . $item->get_id() . "' name='numberqty' value='" . $item->get_quantity() . "'max='" .$item->get_quantity() . "' min='1' onchange='changeCheckBoxValue(this.className)'> " . "<br/>";
      }

如果您在项目上没有 get_id()，请使用任何唯一标识符。

下面这段代码负责触发改变复选框值的事件 onchange='changeCheckBoxValue(this.className)

最后将以下函数添加到您的代码中：

function changeCheckBoxValue(className) {

    var checkBox = document.getElementsByClassName(className + 'checkBox')[0];
    var currentValue = checkBox.value;
    var wantedAmount = document.getElementsByClassName(className)[0].value;
    checkBox.value = currentValue .replace(new RegExp('[0-9]* QTY'),wantedAmount + ' QTY');
}

这将更新复选框的值

祝你好运

【讨论】：