Javascript Get Selected Radio Button Werte

Question

Ich wurde mit der Codierung einige Javascript beauftragt, um eine Pizza zu einem "Korb" hinzuzufügen. Ich habe einen 'In den Warenkorb' Knopf, der Name, Beschreibung, Größe und Preis der Pizza benötigt.

Derzeit habe ich es geschafft, den Namen und die Beschreibung der Pizza von der "Add to Basket" -Taste zu bekommen, aber ich muss auch den Preis und die Größe der Pizza, die von welcher Radio-Taste der Benutzer wählt bestimmt.

Der HTML-Code wurde mir gegeben. Hier

<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> 

ist das Javascript, ich wurde auch gebeten, den NodeList auf ein Array zu konvertieren und dann durch das Array filtert das Optionsfeld zu erhalten, die überprüft, was ich denke, ich mit den ersten beiden Zeilen getan habe.

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; 
} 

Nun weiß ich nicht, wie den ‚Daten-Preis‘ zu erhalten und den ‚Wert‘ (Größe der Pizza) aus der Radio-Button.

Answer 1

Sie können radio.getAttribute('data-price') verwenden, um den Preis der Pizza und radio.value zu erhalten, um die Größe der Pizza zu erhalten. Beachten Sie auch, dass Sie [].slice.call vermeiden können, indem Sie [].filter.call auf Ihrer NodeList verwenden.

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>