Javascript获取选定的单选按钮值

Question

I have been tasked with coding some javascript to add a pizza to a 'basket'. I have a 'Add to Basket' button which needs to get the name, description, size and price of the pizza.

Currently, I have managed to get the name and description of the pizza from the 'Add to Basket' button but I also need to get the price and size of the pizza which is determined from what radio button the user selects.

The html code was given to me.

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

Here is the javascript, I was also asked to convert the NodeList to an array and then filter through that array to get the radio button that is checked which I think I have done with the first two lines.

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

Now I don't know how to get the 'data-price' and the 'value' (size of pizza) from the radio button.

Answer 1

You can use radio.getAttribute('data-price') to get the price of the pizza and radio.value to get the size of the pizza. Also note that you can avoid using [].slice.call by using [].filter.call on your NodeList.

 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>