javascript - 複数のチェックボックスとラジオ ボタンから情報を取得する

Question

私はハンバーガーを注文するためのサイトに取り組んでおり、ラジオ ボタンを使用してハンバーガーを選択し、一連のチェックボックスを使用して追加のトッピングを選択できるようにしたいと考えています。ラジオボタンを単独で機能させることができ、現在チェックボックスを追加する作業を行っています。私の現在のHTMLは

<td style="border:5px solid #39973B" colspan=2>
     <input id="size" name="beef" data-price="6.00" value="1" type="radio">single &pound6.00
     <input id="size" name="beef" data-price="7.00" value="2" type="radio">double &pound7.00
     </td>
<tr >
<td style="border:5px solid #39973B" colspan=2 >
<table>
<td align="center" colspan=5 style="border:2px solid #39973B"> Additional toppings (50p per topping)</td><br>
                      </tr><td style="padding:6px">Cheese</td><td style="padding:6px">Bacon</td><td style="padding:6px">Onions</td>
              </tr>

              <tr style="border:2px solid #39973B" ><td>
                  <input type="checkbox" name="Topping" value="Cheese"></td><td>
                  <input type="checkbox" name="Topping" value="Bacon"></td><td>
                  <input type="checkbox" name="Topping" value="Onions"></td>
                  </table>
                  <input id="addbeef" name="beef" type="button"  value="add">
                  </td>
                  </tr>
</table>

トッピングとそのコストをそのように定義しました

var top =["Cheese" , "Bacon", "Onions"];
  var cost=[.50, .50, .50];

そして、私のjavascriptは

function getCheckedBoxes() {
    var css = 'input#size[name="beef"]:checked';
    var input = document.querySelector(css);    
    var size = input.value==='1'?'single':'double';
    var price = Number(input.getAttribute('data-price'));
  var checkboxes = document.getElementByName("Topping");
  var checkboxesChecked = [];
  for (var i=0; i<checkboxes.length; i++) {
     if (checkboxes[i].checked) {
        checkboxesChecked.push(checkboxes[i]);
     }
  }
    for (var j=0; j<checkboxesChecked.length; j++){
        size+=top[j];
        price+=cost[j];
    }
    var orderline = [this.name,size,price];
    addToBasket(orderline);
}

どんな助けでも大歓迎です。ありがとう

Answer 1

var checkboxes = document.getElementByName("Topping");
for (var val,i=0; i<checkboxes.length; i++) {
   if (checkboxes[i].checked) {
      val = checkboxes[i].value;
      size+=top[val]+" ";
      price+=cost[val];
   }
}