Javascript獲取部分選項單選按鈕值

Question

我的任務是編寫一些javascript以將一個比薩添加到「籃子」中。我有一個'添加到購物籃'按鈕，它需要獲得披薩的名稱，描述，尺寸和價格。

目前，我已經設法從「添加到購物籃」按鈕中獲得披薩的名稱和描述，但我也需要獲得由用戶選擇的單選按鈕確定的披薩的價格和尺寸。

html代碼給了我。

<td> 
    <table border="0" cellpadding="0"> 
     <tbody> 
      <tr align="center"> 
       <td> 
        <input id="size" name="Cheese" data-price="6.50" value="Small" type="radio" checked>Small 
       </td> 
       <td> 
        <input id="size" name="Cheese" data-price="8.50" value="Medium" type="radio">Medium 
       </td> 
       <td> 
        <input id="size" name="Cheese" data-price="9.99" value="Large" type="radio">Large 
       </td> 
      </tr> 
      <tr align="center"> 
       <td style="padding-top: 6px">£6.50</td> 
       <td style="padding-top: 6px">£8.50</td> 
       <td style="padding-top: 6px">£9.99</td> 
      </tr> 
     </tbody> 
    </table> 
</td> 
<td> 
    <input id="addbasket" name="Cheese" data-description="Mozzarella cheese" value="Add to Basket" type="button" onclick="addBasket(this)"> 
</td> 

這裏是JavaScript，我還要求節點列表轉換爲數組，然後通過濾鏡陣列來獲得，我認爲我已經與前兩行做過檢查的單選按鈕。

function addBasket(button) { 
    var nodes = [].slice.call(document.getElementsByName(name)); 
    var radio = nodes.filter(function(el){return el.checked;})[0]; 

    var pizzaname = button.name; 
    var pizzadesc = button.getAttribute('data-description'); 

    var pizzaprice = radio.dataset.price; 
} 

現在我不知道如何從單選按鈕中獲取'數據價格'和'價值'（披薩大小）。

Answer 1

您可以使用radio.getAttribute('data-price')來得到披薩的價格和radio.value來獲得披薩的大小。另外請注意，您可以通過在NodeList上使用[].filter.call來避免使用[].slice.call。

var name = 'Cheese' 
 

 
function addBasket(button) { 
 
    var nodes = document.getElementsByName(button.name) 
 
    var radio = [].filter.call(nodes, function(e) { 
 
    return e.checked 
 
    })[0] 
 

 
    var pizzaname = button.name 
 
    var pizzadesc = button.getAttribute('data-description') 
 

 
    var pizzasize = radio.value 
 
    var pizzaprice = radio.getAttribute('data-price') 
 

 
    console.log({ 
 
    Name: pizzaname, 
 
    Description: pizzadesc, 
 
    Size: pizzasize, 
 
    Price: pizzaprice 
 
    }) 
 
}

<td> 
 
    <table border="0" cellpadding="0"> 
 
    <tbody> 
 
     <tr align="center"> 
 
     <td> 
 
      <input name="Cheese" data-price="6.50" value="Small" type="radio" checked>Small 
 
     </td> 
 
     <td> 
 
      <input name="Cheese" data-price="8.50" value="Medium" type="radio">Medium 
 
     </td> 
 
     <td> 
 
      <input name="Cheese" data-price="9.99" value="Large" type="radio">Large 
 
     </td> 
 
     </tr> 
 
     <tr align="center"> 
 
     <td style="padding-top: 6px">£6.50</td> 
 
     <td style="padding-top: 6px">£8.50</td> 
 
     <td style="padding-top: 6px">£9.99</td> 
 
     </tr> 
 
    </tbody> 
 
    </table> 
 
</td> 
 
<td> 
 
    <input id="addbasket" name="Cheese" data-description="Mozzarella cheese" value="Add to Basket" type="button" onclick="addBasket(this)"> 
 
</td>