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，我还被要求将NodeList转换为数组，然后通过该数组进行过滤以获取选中的单选按钮，我认为我已经完成了前两行。

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>