javascript - 单选按钮 JavaScript

Question

我有如下的单选按钮:

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

单选按钮在组中被分隔为(Apple,Mango,Pineapple,Grape)。 我需要添加他需要的价格和数量。

示例:

如果用户点击单选按钮中的Dark Apple且数量为1，则价格应为 20 并且如果用户将点击的 Radio 更改为 Light Apple radiobutton 则价格应为 10 - 20 (之前的价格，如果选中)= 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>