Javascript選択したラジオボタンの値を取得

Question

私はいくつかのjavascriptをコーディングして、 'basket'にピザを追加することを任されています。私はピザの名前、説明、サイズ、価格を取得する必要がある 'バスケットに追加'ボタンを持っています。

現在、私は「Add to Basket」ボタンからピザの名前と説明を取得できましたが、ユーザーが選択するラジオボタンから決定されるピザの価格とサイズを取得する必要があります。

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のですが、私はまた、配列にNodeListオブジェクトに変換してから、私は最初の2行で行っていると思いますどのチェックされているラジオボタンを取得するためにその配列によってフィルタリングするように頼まれました。

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を使用できます。また、[].slice.callの使用を避けるには、NodeListに[].filter.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>