Question

嗨，所以我一直在处理这段代码，允许用户选择不同的单选按钮选项，然后在选择后给出总成本。

这就是我的尝试：（html）

 Total <input type="text" id="count" value="$0" readonly />       


<form action="MAILTO:someone@example.com" method="post" enctype="text/plain">
<h4>Contact plugin</h4>
<input type="radio" name="pak1" class="mnozstvi_sleva" value="4&#x00A;Qty" onClick="changeText(0)">No

<input type="radio"  class="mnozstvi_sleva" onclick="changeText(5)" value="2&#x00A;Qty" name="PAk1" >Yes!

<h4> Mailing list</h4> <input type="radio"  class="mnozstvi_sleva" onclick="changeText2(0)" value="2&#x00A;Qty" name="PAk21" >No

  <input type="radio"  class="mnozstvi_sleva" onclick="changeText2(10)" value="2&#x00A;Qty" name="PAk21" >Yes
        `

（JavaScript的）

function changeText(value) {
 document.getElementById('count').value = 10 * value;   
}

function changeText2(value) {
 document.getElementById('count').value = 10 * value;   
}

所以我需要将它们加在一起而不是更改为一个数字，你可以在jsfiddle上运行代码：jsfiddle

Answer 1

猜猜你需要为两个无线电使用处理程序。您仅使用Yes而不使用其他任何内容。尝试这样的事情：

function updateTotal () {
  total = 0;
  total += frm.contact_plugin.value * 10 + frm.mailing_list.value * 10;
  document.getElementById("total").innerHTML = total;
}

* {font-family: Segoe UI;}
form ul, form ul li {list-style: none; margin: 0; padding: 0;}
form ul li strong, form ul li label {display: inline-block; width: 120px; padding: 3px;}
form ul li label {width: 75px;}

<p><strong>Billing</strong></p>
<form action="" id="frm">
  <ul>
    <li>
      <strong>Contact plugin</strong>
      <label><input type="radio" value="1" name="contact_plugin" onclick="updateTotal()" /> Yes</label>
      <label><input type="radio" value="0" name="contact_plugin" onclick="updateTotal()" /> No</label>
    </li>
    <li>
      <strong>Mailing list</strong>
      <label><input type="radio" value="1" name="mailing_list" onclick="updateTotal()" /> Yes</label>
      <label><input type="radio" value="0" name="mailing_list" onclick="updateTotal()" /> No</label>
    </li>
  </ul>
</form>
<p><strong>Total:</strong> <span id="total">0</span>$</p>

Answer 2

例如

var cost1 = 0, cost2 = 0;
function changeText(value) {
 cost1 = 10 * value;   
calculateSum();
}

function changeText2(value) {
 cost2 = 10 * value;   
calculateSum();
}

function calculateSum() {
document.getElementById('count').value = cost1 + cost2;
}

Answer 3

我建议采用更加动态的方式： DEMO

您应该调用以下方法changeTotal(100, this.name)。它不依赖于父级，因此，您可以随处使用任何标签（不仅仅是输入）通过事件

var groups = {};
function changeTotal(value, group) {
    groups[group.toLowerCase()] = value;//toLowerCase has added for  PAk1 and pak1
    var sum = 0;

    Object.keys(groups).forEach(function (key) {
        sum += groups[key]
    });
    document.getElementById('count').value = "$"+(10 * sum);
}

Answer 4

function updateTotal () {
  total = 0;
  total += frm.contact_plugin.value * 10 + frm.mailing_list.value * 10;
  document.getElementById("total").innerHTML = total;
}

* {font-family: Segoe UI;}
form ul, form ul li {list-style: none; margin: 0; padding: 0;}
form ul li strong, form ul li label {display: inline-block; width: 120px; padding: 3px;}
form ul li label {width: 75px;}

<p><strong>Billing</strong></p>
<form action="" id="frm">
  <ul>
    <li>
      <strong>Contact plugin</strong>
      <label><input type="radio" value="1" name="contact_plugin" onclick="updateTotal()" /> Yes</label>
      <label><input type="radio" value="0" name="contact_plugin" onclick="updateTotal()" /> No</label>
    </li>
    <li>
      <strong>Mailing list</strong>
      <label><input type="radio" value="1" name="mailing_list" onclick="updateTotal()" /> Yes</label>
      <label><input type="radio" value="0" name="mailing_list" onclick="updateTotal()" /> No</label>
    </li>
  </ul>
</form>
<p><strong>Total:</strong> <span id="total">0</span>$</p>

如何让我的javascript代码添加总金额

4 个答案: