JavaScriptでラジオボタンをチェックする

どういうわけか、私はこれを理解することができないようです。

カテゴリを切り替える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ありと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でこのJavascriptコードを使用して、Web拡張オプションページ内で値をロードするために、ラジオ入力ボタンを選択（チェック）することができました。

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>