ラジオボタン見積り機能をつくりたい

Question

新しくサイトを制作するのですが、下記画像のように、
いくつかの項目をラジオボタンで選んだ合計金額を自動で計算してくれる機能をつけたいと思っています。

また数量によっても金額を変動したいです。

私はコーディングしかほとんど経験がないのですが、調べたところJavaScriptで実装できるようですが
この画像ですとどのようなコードになりますでしょうか？

また実装は簡単にできるものでしょうか？

経験が浅いのでご教示いただけますと幸いです。
宜しくお願い致します。

Answer 1

まずはhtmlの書き方からでしょうね
ラジオボタンが排他的にどう機能するかなど学習してください
フロートしては何かがchangeするたびに再計算をします
初心者ということなので以下コピペするだけで動くようにソースをはっておきます

<script>
document.addEventListener('change',function(){
  var ab=(n=document.querySelector('[name=ab]:checked'))?parseInt(n.getAttribute("data-value")):0;
  var cd=(n=document.querySelector('[name=cd]:checked'))?parseInt(n.getAttribute("data-value")):0;
  var e=parseInt(document.querySelector('[name=e]').value);
  document.querySelector('[name=f]').value=(ab+cd)*e;
});
</script>

<label><input type="radio" name="ab" value="a" data-value="10">a:10円</label>
<label><input type="radio" name="ab" value="b" data-value="20">b:20円</label><br>
<label><input type="radio" name="cd" value="c" data-value="30">c:30円</label>
<label><input type="radio" name="cd" value="d" data-value="40">d:40円</label><br>
<select name="e">
<option value="0">--</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<input type="text" name="f" style="text-align:right" value="0">

Comments

[chanmar]

ご回答ありがとうございます。もう少し色々と試してから質問すべきでした。
ご親切に誠にありがとうございます！