1

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

在这段代码中，我希望有 4 组单选按钮，每次选择一个选项时，都会将价格输入到每个单选组的变量中。IE 

    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);
       }
4

3 回答 3

0

Your requirements seem pretty simple, here's an example that should answer most questions. There is a single click listener on the form so whenever there is a click on a form control, the price will be updated.

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

You could put a single listener on the form for click events and update the price automatically, in that case you can get rid of the update button.

于 2012-10-08T05:04:53.253 回答
0

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

到了计算的时候，只需遍历每个组并获取value选中的收音机的属性。

由于 value 属性是数字的字符串表示形式，因此您需要在进行任何数学运算之前将其转换回数字（但这是一个简单的parseIntor parseFloat）。

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

从长远来看，像 jQuery 或 Prototype（或 MooTools、script.aculo.us 等）这样的库可能会使这更容易，具体取决于您不想重新发明轮子的 DOM 操作代码量。

于 2012-10-08T04:20:03.210 回答
0

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

于 2012-10-08T04:02:21.170 回答