JavaScriptを使ってラジオボタンからデータ属性を取得する方法は？

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

あなたがそうのような要素のカスタム属性data-参照することができます。詳細については

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

は、データ属性を使用してMDN docsを参照してください。

注：属性名に2番目のダッシュがある場合、例： data-price-newdatasetオブジェクトのプロパティは、これをキャメルケースに反映します。 dataset.priceNew

Answer 2

document.getElementById("vehicletype"); 

これは、そのIDを持つ要素を取得します。そのidを持つ単一の要素。ドキュメント内の複数の要素はIDを共有できません。

vehicleTyp.options 

選択要素にはオプションがあります。ラジオボタンでは表示されません。

---

あなたがすべきチェックする要素を検索するには：

• は、すべてのラジオボタンを取得します。あなたはあなたがgetAttribute("data-price");やthe dataset propertyを使用することができます探している要素が見つかったらcheckedプロパティが

---

本当です、あなたがものを見つけるまで、それらの上getElementsByName

ループを考えてみましょう。