单选按钮 Javascript

Question

我有radiobuttons，如下所示：

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="" />
​

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

示例：

如果用户在radiobutton 和1 Qty 中单击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/

（笔记本电脑快死了，明天我会详细说明！）