JS セレクトボタンを元に計算

Question

以前の質問の追加で質問です。

キャンペーンというチェックボックスを追加したいです。
このボックスをクリックされるとフルーツの代金を計算に含まないように設定したいです。

<form name="myform">
　 <input type="radio" name="fruit" value="100">りんご(¥100)
　 <input type="radio" name="fruit" value="200">みかん(¥200)
　 <input type="radio" name="fruit" value="300">いちご(¥300)
　 <input type="radio" name="fruit" value="400">ぶどう(¥400)

　 <input type="checkbox" name="option[]" value="300">プレゼント包装(¥300)
　 <input type="checkbox" name="option[]" value="200">リボン付き(¥200)
　 <input type="checkbox" name="option[]" value="100">保護付き(¥100)

　 <input type="checkbox" name="campaign[]" value="">キャンペーン

   <input type="text" name="total" value="0"> 円
</form>

Comments

[yambejp]

「フルーツの代金を計算に含まない」というのはオプションの値段の合計をだすということでしょうか？

[m.ts10806]

完全に丸投げです。以前の質問では、JavaScriptのコードを回答として提示したかと思いますが、htmlだけでやろうとしていますか？調べてみたこと、やってみたこと（そのソースコード）を具体的に追記してください。また参考先サイトがあればURLも質問に追記してください。既に見た先が回答についてしまうと無駄なやり取りが発生しますし、もしかしたら参考記事の理解が間違っているために解決に至れていないのかもしれません。https://teratail.com/help/question-tips#questionTips1-2

Answer 1

いまいち命題の主旨がわかりませんが、こんな感じで

window.addEventListener('DOMContentLoaded', function(e){
  document.querySelector('#myform').addEventListener('change',function(e){
    var f=e.target.form;
    var fruit=parseInt((f.querySelector('[name=fruit]:checked')||{value:0}).value);
    var option=([0].concat([].map.call(f.querySelectorAll('[name="option[]"]:checked'),function(x){
      return parseInt(x.value);
    })).reduce(function(x,y){return x+y;}));
    var flg=f.querySelector('[name="campaign[]"]').checked?0:1;
    f.querySelector('[name=total]').value=(fruit*flg)+option;
  });
});

<form id="myform">
<input type="radio" name="fruit" value="100">りんご(\100)<br>
<input type="radio" name="fruit" value="200">みかん(\200)<br>
<input type="radio" name="fruit" value="300">いちご(\300)<br>
<input type="radio" name="fruit" value="400">ぶどう(\400)<br>

<input type="checkbox" name="option[]" value="300">プレゼント包装(\300)<br>
<input type="checkbox" name="option[]" value="200">リボン付き(\200)<br>
<input type="checkbox" name="option[]" value="100">保護付き(\100)<br>

<input type="checkbox" name="campaign[]" value="">キャンペーン<br>

 <input type="text" name="total" value="0"> 円
</form>