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

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

내 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().

현재 2016 년 document.querySelector에는 ID를 모르고 사용하는 것이 저장됩니다 (특히 라디오 버튼이 2 개 이상인 경우).

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

가장 쉬운 방법은 다음과 같이 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>

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

암호:

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

데모 : JSFiddle

웹 확장 옵션 페이지 내에서 Firefox 72의이 자바 스크립트 코드를 사용하여 라디오 입력 버튼을 선택 (확인)하여 값을로드 할 수있었습니다.

var reloadItem = browser.storage.sync.get('reload_mode');
reloadItem.then((response) => {
    if (response["reload_mode"] == "Periodic") {
        document.querySelector('input[name=reload_mode][value="Periodic"]').click();
    } else if (response["reload_mode"] == "Page Bottom") {
        document.querySelector('input[name=reload_mode][value="Page Bottom"]').click();
    } else {
        document.querySelector('input[name=reload_mode][value="Both"]').click();
    }
});

값을 저장할 관련 코드는 다음과 같습니다.

reload_mode: document.querySelector('input[name=reload_mode]:checked').value

다음과 같은 HTML이 주어집니다.

    <input type="radio" id="periodic" name="reload_mode" value="Periodic">
    <label for="periodic">Periodic</label><br>
    <input type="radio" id="bottom" name="reload_mode" value="Page Bottom">
    <label for="bottom">Page Bottom</label><br>
    <input type="radio" id="both" name="reload_mode" value="Both">
    <label for="both">Both</label></br></br>