How to get data attribute from radio button with JavaScript?

Question

I want to get the data-price value from radio button which is checked. I tried something like that:

<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");

But this does not work. How can I solve this issue?

Answer 1

document.getElementById("vehicletype");

This gets the element with that id. The single element with that id. Multiple elements in a document cannot share an id.

vehicleTyp.options

Select elements have options. Radio buttons do not.

---

To find the checked element you should:

• Get all the radio buttons. Consider getElementsByName
• Loop over them until you find one where the checked property is true

---

Once you have found the element you are looking for you can use getAttribute("data-price"); or the dataset property.