IT TIP

자바 스크립트로 라디오 버튼 확인

itqueen 2020. 10. 18. 19:56
반응형

자바 스크립트로 라디오 버튼 확인


어떤 이유로 나는 이것을 알아낼 수없는 것 같습니다.

내 html에 카테고리를 전환하는 라디오 버튼이 있습니다.

<input type="radio" name="main-categories" id="_1234" value="1234" /> // All
<input type="radio" name="main-categories" id="_2345" value="2345" /> // Certain category
<input type="radio" name="main-categories" id="_3456" value="3456" /> // Certain category
<input type="radio" name="main-categories" id="_4567" value="4567" /> // Certain category

사용자는 원하는 것을 선택할 수 있지만 특정 이벤트가 트리거되면 1234기본적으로 선택된 라디오 버튼이기 때문에 체크 된 라디오 버튼으로 설정 하고 싶습니다 .

나는 이것의 버전을 시도했다 (jQuery 유무에 관계없이).

document.getElementById('#_1234').checked = true;

그러나 업데이트되지 않는 것 같습니다. 사용자가 볼 수 있도록 눈에 띄게 업데이트해야합니다. 아무도 도울 수 있습니까?

편집 : 나는 단지 피곤하고 #그것을 지적 해 주셔서 감사합니다 $.prop().


CSS / JQuery 구문 ( #식별자 용)을 네이티브 JS와 혼합하지 마십시오 .

네이티브 JS 솔루션 :

document.getElementById("_1234").checked = true;

JQuery 솔루션 :

$("#_1234").prop("checked", true);


"1234"버튼을 설정하려면 "id"를 사용해야합니다.

document.getElementById("_1234").checked = true;

브라우저 API ( "getElementById")를 사용하는 경우 선택기 구문을 사용하지 않습니다. 찾고있는 실제 "id"값만 전달하면됩니다. jQuery 또는 .querySelector()및에서 선택기 구문을 사용합니다 .querySelectorAll().


가장 쉬운 방법은 다음과 같이 jQuery를 사용하는 것입니다.

$(document).ready(function(){
  $("#_1234").attr("checked","checked");
})

이렇게하면 새 속성 "checked"(HTML에서는 값이 필요하지 않음)가 추가됩니다. jQuery 라이브러리를 포함하는 것을 잊지 마십시오.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

현재 2016 년 document.querySelector에는 ID를 모르고 사용할 수 있습니다 (특히 라디오 버튼이 2 개 이상인 경우).

document.querySelector("input[name=main-categories]:checked").value

document.getElementById()함수를 사용 하면 #요소의 ID 앞에 전달할 필요가 없습니다 .

암호:

document.getElementById('_1234').checked = true;

데모 : JSFiddle

참고 URL : https://stackoverflow.com/questions/21166860/check-a-radio-button-with-javascript

반응형