Question

我想从选中的单选按钮获取数据价格值。我尝试过类似的东西：

<input type="radio" name="vehicletype" id="vehicletype" value="{{$vehicletypeData->id}}" data-price="{{$vehicletypeData->km_rate}}" required="">


var vehicleTyp=document.getElementById("vehicletype");
                var vetselindx=vehicleTyp.options[vehicleTyp.selectedIndex];
                var prikm=vetselindx.getAttribute("data-price");

但这不起作用。我该如何解决这个问题？

Answer 1

document.getElementById("vehicletype");

这将获得具有该id的元素。具有该id的单个元素。文档中的多个元素不能共享id。

vehicleTyp.options

选择元素有选项。单选按钮没有。

要查找已选中的元素，您应该：

获取所有单选按钮。考虑getElementsByName
循环遍历它们，直到找到checked属性为真的

找到您要找的元素后，您可以使用getAttribute("data-price");或the dataset property。

Answer 2

您可以像这样引用元素的自定义data-属性：

const el = document.getElementById("vehicletype");
const price = el.dataset.price;

有关详细信息，请参阅MDN docs使用数据属性。

注意：如果您在属性名称中有第二个破折号，例如data-price-new dataset对象属性将在camelcase中反映出来。 dataset.priceNew

如何使用JavaScript从单选按钮获取数据属性？

2 个答案: