0

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

sはasradiobuttonで区切られます。彼が必要とするものを追加する必要があります。Group(Apple,Mango,Pineapple,Grape)PriceQuantity

例：

ユーザーがでクリックDark Appleした場合は、ユーザーがクリックをに変更した場合、価格はである必要がありradiobuttonます。これはJavaScriptを使用して可能ですか？1 QtyPrice20RadioLight Apple radiobutton10 - 20(Previous Price If Checked) = 10

私が試した私のコード：

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

2 に答える 2

2

入力は次のようになります。

<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>
于 2012-09-17T06:20:07.820 に答える
1

jQuery の簡単な例を次に示します: http://jsfiddle.net/FTscC/

（ラップトップが死にかけています。明日できるときに詳しく説明します！）

于 2012-09-17T05:45:08.167 に答える