Javascript 获取选定的单选按钮值

Question

我的任务是编写一些 javascript 的代码，以便将披萨添加到 'basket'。我有一个 'Add to 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 转换为一个数组，然后过滤该数组以获取选中的单选按钮，我想我已经用前两行完成了.

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

现在我不知道如何从单选按钮中获取 'data-price' 和 'value'（披萨的大小）。

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>

Javascript 获取选定的单选按钮值

Javascript Get Selected Radio Button Values

javascript

radio-button

nodelist