单选按钮 Javascript

Question

我有如下radiobutton：

Apple
<input type="radio" id="one" name="apple" data-price="10" value="light"/> Light
<input type="radio" id="two" name="apple" data-price="20" value="dark" /> Dark
<input type="text" id="appleqty" name="appleqty" value="" />
Mango
<input type="radio" id="three" name="Mango" data-price="30" value="light"/> Light
<input type="radio" id="one" name="Mango" data-price="40" value="dark" /> Dark
<input type="text" id="Mangoqty" name="Mangoqty" value="" />
Pine Apple
<input type="radio" id="four" name="Pineapple" data-price="50" value="light"/> Light
<input type="radio" id="five" name="Pineapple" data-price="60" value="dark" /> Dark
<input type="text" id="Pineappleqty" name="Pineappleqty" value="" />
Grape
<input type="radio" id="six" name="Grape" data-price="70" value="light"/> Light
<input type="radio" id="seven" name="Grape" data-price="80" value="dark" /> Dark
<input type="text" id="Pineappleqty" name="Pineappleqty" value="" />
​

radiobutton在Group中分隔为(Apple,Mango,Pineapple,Grape)。我需要添加Price和他需要的Quantity。

例：

如果用户在1 Qty radiobutton中单击了Dark Apple，则Price应该20，如果用户将点击的Radio更改为Light Apple radiobutton，则价格应10 - 20(Previous Price If Checked) = 10。使用 JavaScript 可以吗？

我尝试过的代码：

function upprice(ref)
{
    var elname = ref.getAttribute("name");
    var qtyname = elname+"qty";
    var price = ref.getAttribute("proprice");
    var qty = parseInt(document.getElementById(qtyname).value)
    var newprice = parseInt(price*qty);
    var olprice = parseInt(document.getElementById("orderpagepriceinstant").innerHTML);
    var totalprice = parseInt(olprice+newprice);
    document.getElementById("orderpagepriceinstant").innerHTML = parseInt(totalprice)
}

Answer 1

您的输入应如下所示：

<input type="radio" name="apple" value="10">Light
<input type="radio" name="apple" value="20">Dark
<input type="text" name="appleqty" value="">

您可以在单选按钮上放置一个点击侦听器，在数量上放置一个更改侦听器以更新价格：

<input type="radio" onclick="updatePrice(this)" ...>
<input type="text" onclick="updatePrice(this)" ...>

更新功能为：

function updatePrice(el) {
  var priceEach, quantity, itemValue;
  if (el.type == 'radio') {
    priceEach = getRBValue(el);
    quantity = el.form[el.name + 'qty'].value;
  } else if (el.type == 'text') {
    quantity = el.value;
    priceEach = getRBValue(el.form[el.name.replace(/qty$/,'')]);
  }
  /* 
     code here to validate the value of quantity
  */
  itemValue = quantity * priceEach;

  /* 
     do something with itemValue
  */
  alert(itemValue);
}
// Get the value of a radio button set
function getRBValue(el) {
  var buttons;
  // See if have been passed a button or button set (NodeList)
  if (el.type == 'radio') {
    buttons = el.form[el.name];
  } else if (typeof el.length == 'number') {
    buttons = el;
  }
  if (buttons) {
    for (var i=0, iLen=buttons.length; i<iLen; i++) {
      if (buttons[i].checked) {
        return buttons[i].value;
      }
    }
  }
}
</script>

标记，您还可以向表单添加单击侦听器以执行更新，而不是在每个单选按钮上添加。您还应该有一个重置按钮，以便用户可以清除表单。

<form ... >
    <input type="radio" name="apple" value="10" onclick="updatePrice(this)">Light
    <input type="radio" name="apple" value="20" onclick="updatePrice(this)">Dark
    <input type="text" name="appleqty" value="" onchange="updatePrice(this)">
    <br>
    <input type="reset">
</form>

Answer 2

下面是一个快速的 jQuery 示例： http://jsfiddle.net/FTscC/

（笔记本电脑快死了，我明天什么时候可以详细说明！