如何在使用值时输出复选框详细信息

how do i output a checkbox details when a value is in use

本文关键字：输出 复选框 详细信息      更新时间：2023-09-26

我被困在了该怎么做上，在我的购物篮中显示"大披萨£5.50"这样的值。 问题是我已经有两个Java代码，一个至少1必须勾选，另一个在篮子中显示订单总数。 我如何显示订单总数以及购物篮中勾选的每个框的描述。我已经为每个价格分配了一个值，所以我不知道下一步该去哪里。我对 JavaScript 相当陌生，所以如果有人制作一个工作版本"JavaScript 代码"，我将不胜感激。

下面是相关的代码，但不是完整的页面。总共有 14 个复选框，如 JavaScript 所示。

<script type="text/javascript">
    function validateFunction() {
        var fo = document.formname;
        if (!fo.field1.checked && !fo.field2.checked && !fo.field3.checked &&
            !fo.field4.checked && !fo.field5.checked && !fo.field6.checked && !fo.field7.checked && !fo.field8.checked && !fo.field9.checked && !fo.field10.checked && !fo.field11.checked && !fo.field12.checked && !fo.field13.checked && !fo.field14.checked) {
            alert("You must select at least one option.");
            return false;
        }
        return true;
    }

    function totalIt() {
        var input = document.getElementsByClassName("product");
        var total = 0;
        for (var i = 0; i < input.length; i++) {
            if (input[i].checked) {
                total += parseFloat(input[i].value);
            }
        }
        document.getElementById("total").value = "£" + total.toFixed(2);
    }
</script>
<form name="formname" id="payment" onsubmit="return validateFunction();">
    <!-- select pizza section  -->
    <fieldset>
        <legend> select your pizza </legend>
        <p>
            <input type="checkbox" name="field1" class="product" value="5.50" onclick="totalIt()" /> small £5.50</p>
        <p>
            <input type="checkbox" name="field2" class="product" value="8.50" onclick="totalIt()" /> medium £8.50</p>
        <p>
            <input type="checkbox" name="field3" class="product" value="11.50" onclick="totalIt()" /> large £11.50</p>
    </fieldset>
    <div id="basket">
        <h3> Basket </h3>
        <p>Order Total
            <input value="£0.00" readonly="readonly" type="text" id="total" /> </p>
    </div>

如果您使用的是较新的浏览器，则可以使用数据集：代码笔

<script type="text/javascript">
    function validateFunction() {
  var fo = document.formname;
  if (!fo.field1.checked && !fo.field2.checked && !fo.field3.checked &&
    !fo.field4.checked && !fo.field5.checked && !fo.field6.checked && !fo.field7.checked && !fo.field8.checked && !fo.field9.checked && !fo.field10.checked && !fo.field11.checked && !fo.field12.checked && !fo.field13.checked && !fo.field14.checked) {
    alert("You must select at least one option.");
    return false;
  }
  return true;
}
function totalIt() {
  var input = document.getElementsByClassName("product");
  var total = 0;
  var contents = "";
  for (var i = 0; i < input.length; i++) {
    if (input[i].checked) {
      var article = input[i];
      total += parseFloat(article.value);
      contents += article.dataset.desc + '<br/>';
    }
  }
  document.getElementById("contents").innerHTML = contents;
  document.getElementById("total").value = "£" + total.toFixed(2);
}
</script>
<form name="formname" id="payment" onsubmit="return validateFunction();">
<!-- select pizza section  -->
<fieldset>
    <legend> select your pizza </legend>
    <p>
        <input type="checkbox" data-desc="foo" name="field1" class="product" value="5.50" onclick="totalIt()" /> small £5.50</p>
    <p>
        <input type="checkbox" data-desc="bar" name="field2" class="product" value="8.50" onclick="totalIt()" /> medium £8.50</p>
    <p>
        <input type="checkbox" data-desc="bam" name="field3" class="product" value="11.50" onclick="totalIt()" /> large £11.50</p>
</fieldset>
<div id="basket">
    <h3> Basket </h3>
  <div id="contents">
  </div>
    <p>Order Total
        <input value="£0.00" readonly="readonly" type="text" id="total" /> </p>
</div>

数据参考

相关文章：