JavaScript로 라디오 버튼에서 데이터 속성을 가져 오는 방법은 무엇입니까?

체크 된 라디오 버튼에서 데이터 가격 값을 가져오고 싶습니다. 나는 이와 비슷한 것을 시도했다 :JavaScript로 라디오 버튼에서 데이터 속성을 가져 오는 방법은 무엇입니까?

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

그러나 이것은 작동하지 않는다. 이 문제를 어떻게 해결할 수 있습니까?

출처

2017-12-14 Karthik

은'{{$ vehicletypeData-> id}}'Laravel입니까? – OIIO

@RishiRaut yah Sir – Karthik

시도해보십시오 console.log (vehicleTyp.dataset.price); – XYZ

당신과 같이 정의를 요소의 data- 속성을 참조 할 수 있습니다 :

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

자세한 내용은 데이터 속성 사용에 대한 MDN docs를 참조하십시오.

참고 : 속성 이름에 두 번째 대시가있는 경우. data-price-newdataset 개체 속성은 camelcase에이를 반영합니다. dataset.priceNew

출처

2017-12-14 10:46:37

이것이 사실이지만이 질문에서 문제를 해결하기 위해 어떤 조치도 취하지 않습니다. 사실,'elem.getAttribute ("data-price")는 질문에서 실제로 제대로 작동하는 유일한 코드 비트입니다. –

document.getElementById("vehicletype");

이 그 id를 가진 요소를 가져옵니다. 그 id를 가진 단일 요소. 문서의 여러 요소는 ID를 공유 할 수 없습니다.

vehicleTyp.options

선택 요소에는 옵션이 있습니다. 라디오 버튼은 그렇지 않습니다.

모든 라디오 버튼을 받기 :

당신이해야 체크 요소를 찾을 수 있습니다. checked 속성은 당신이 getAttribute("data-price"); 또는 the dataset property을 사용할 수 있습니다 당신이 찾고있는 요소를 발견하면

사실 어디를 찾을 때까지 그들에 getElementsByName

루프를 생각해 보자.

출처

2017-12-14 10:48:10 Quentin

'document.querySelector ("[name = vehicletype] : checked")'를 사용하여 선택된 라디오 버튼을 직접 얻을 수도 있습니다. 이것들이 아직 선택되어 있지 않은 경우는'null'를 돌려줍니다. –

JavaScript로 라디오 버튼에서 데이터 속성을 가져 오는 방법은 무엇입니까?

답변

관련 문제