Javascript获取所选单选按钮值
我的任务是编写一些javascript代码,将比萨饼添加到“篮子”中。我有一个“添加到篮子”按钮,需要获取比萨饼的名称、描述、大小和价格 目前,我已经设法从“添加到篮子”按钮获取比萨饼的名称和描述,但我还需要获取比萨饼的价格和大小,这取决于用户选择的单选按钮 html代码是给我的Javascript获取所选单选按钮值,javascript,radio-button,nodelist,Javascript,Radio Button,Nodelist,我的任务是编写一些javascript代码,将比萨饼添加到“篮子”中。我有一个“添加到篮子”按钮,需要获取比萨饼的名称、描述、大小和价格 目前,我已经设法从“添加到篮子”按钮获取比萨饼的名称和描述,但我还需要获取比萨饼的价格和大小,这取决于用户选择的单选按钮 html代码是给我的 <td> <table border="0" cellpadding="0"> <tbody> <tr align="ce
<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>
现在我不知道如何从单选按钮获取“数据价格”和“值”(比萨饼的大小)。您可以使用
radio.getAttribute(“数据价格”)
获取比萨饼的价格,使用radio.value
获取比萨饼的大小。还请注意,通过在节点列表上使用[].filter.call
,可以避免使用[].slice.call
var name='Cheese'
功能添加篮(按钮){
var节点=document.getElementsByName(button.name)
var radio=[].filter.call(节点,函数(e){
返回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({
名称:pizzaname,
描述:pizzadesc,
大小:披萨大小,
价格:比萨饼价格
})
}
小的
中等
大的
£6.50
£8.50
£9.99
pizzasize变量出现错误“UncaughtTypeError:无法读取未定义的addBasket属性'value'。pizzaprice变量也出现错误,“UncaughtTypeError:无法读取addBasket处未定义的属性'getAttribute'。我一直在做的一个测试是使用alert(pizzaprice),如果选中了small单选按钮,则它是否会显示“6.50”,但它显示为“未定义”或不会显示警报。您是否尝试运行我上面发布的代码段(在我的计算机上运行)然后将代码与您的代码进行比较?我已经再次进行了测试,并按预期工作,谢谢。我已经包括了更多的比萨饼,但是每个比萨饼都有单独的“添加到篮子”按钮,并且为其onclick调用了相同的“添加篮子”功能。当按下这些按钮时,它们都会给我第一个比萨饼的值。关于如何获取与单击的按钮对应的比萨饼值,有什么想法吗?名称和说明与预期一样有效,但价格和大小是从列表中的第一个比萨饼中选择的值。您需要为输入单选按钮设置与添加到篮子按钮相同的名称,并且每个比萨饼名称不同(例如,name=“Pepperoni”
您当前看到的奶酪名称).很乐意帮忙!祝你的项目顺利完成。
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;
}