Question

我正在尝试在我正在处理的网页内创建一个javascript块。我从没上过高中的javascript，它似乎不想回到我身边:(

在这段代码中，我希望有4组单选按钮，每次选择一个选项，价格将被输入每个无线电组的变量。即

    var firstPrice = $25
    var secondPrice = $56
    var thirdPrice = $80
    var fourthPrice = $90

然后在每个广播组有一个选择后，将会有一个附加到提交按钮的功能，该功能将每个价格相加以显示隐藏字段内的最终数量

    var totalPrice = (firstPrice + secondPrice + thirdPrice + fourthPrice)

我的问题是，如何将数字值附加到组内的单选按钮，同名，但每组中的ID不同。然后我只创建一个函数，添加所有价格组，然后将提交按钮设置为onClick = totalPrice（）; 以下是一组单选按钮的示例：

        <label>
          <input type="radio" name="model" value="radio" id="item_0" />
          item 1</label>
        <br />
        <label>
          <input type="radio" name="model" value="radio" id="item_1" />
          item2</label>
        <br />
        <label>
          <input type="radio" name="model" value="radio" id="item_2" />
          item3</label>
        <br />
        <label>
          <input type="radio" name="model" value="radio" id="item_3" />
          Item4</label>
        <br />
        <label>
          <input type="radio" name="model" value="radio" id="item_4" />
          item5</label>

          </form>

然后我的脚本看起来像：

    function finalPrice90{
var selectionFirst = document.modelGroup.value;
var selectionSecond = document.secondGroup.value;
var selectionThird = document.thirdGroup.value;
var selectionFourth = document.fourthGroup.Value;

var totalPrice = (selectionFirst + selectionSecond + selectionThird +         selectionFourth);
       }

Answer 1

试试这个小提琴 http://jsfiddle.net/tariqulazam/ZLQXB/

Answer 2

将无线电输入的value属性设置为每个单选按钮应代表的价格。

当需要计算时，只需循环遍历每个组并获得value属性（如果选中的收音机。

因为value属性是数字的字符串表示，所以在进行任何数学运算之前，您需要将其转换回数字（但这只是一个简单的parseInt或parseFloat）。

这是一个使用纯JavaScript的小提琴：http://jsfiddle.net/XxZwm/

像jQuery或Prototype（或MooTools，script.aculo.us等）这样的库可能会使这一过程变得更加容易，具体取决于您不想重新发明轮子的DOM操作代码的数量。

Answer 3

您的要求看起来很简单，这是一个应该回答大多数问题的例子。表单上有一个单击监听器，因此只要在表单控件上单击，价格就会更新。

<script type="text/javascript">

//function updatePrice(el) {
function updatePrice(event) {
  var el = event.target || event.srcElement;
  var form = el.form;
  if (!form) return;
  var control, controls = form.elements;
  var totalPrice = 0;
  var radios;

  for (var i=0, iLen=controls.length; i<iLen; i++) {
    control = controls[i];

    if ((control.type == 'radio' || control.type == 'checkbox') && control.checked) {
      totalPrice += Number(control.value);
    }

    // Deal with other types of controls if necessary
  }
  form.totalPrice.value = '$' + totalPrice;
}

</script>

<form>
    <fieldset><legend>Model 1</legend>
    <input type="radio" name="model1" value="25">$25<br>
    <input type="radio" name="model1" value="35">$35<br>
    <input type="radio" name="model1" value="45">$45<br>
    <input type="radio" name="model1" value="55">$55<br>
    </fieldset>
    <fieldset><legend>Model 2</legend>
    <input type="radio" name="model2" value="1">$1<br>
    <input type="radio" name="model2" value="2">$2<br>
    <input type="radio" name="model2" value="3">$3<br>
    <input type="radio" name="model2" value="4">$4<br>
    <fieldset><legend>Include shipping?</legend>
      <span>$5</span><input type="checkbox" value="5" name="shipping"><br>
    </fieldset>

    <input name="totalPrice" readonly><br>
    <input type="reset" value="Clear form">
</form>

您可以在表单上放置单个侦听器以自动更新价格，在这种情况下，您可以删除更新按钮。

Javascript将值添加到单选按钮以输入价格

3 个答案: