Question

我被困在做什么，在我的篮子div中显示像“大披萨£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>

Answer 1

如果您使用较新的浏览器，则可以使用数据集： CodePen

<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>

data- reference

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

1 个答案: