web-dev-qa-db-ja.com

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の有無にかかわらず）のバージョンを試してみました：

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

しかし、それは更新されていないようです。ユーザーが表示できるように、目に見えるように更新する必要があります。誰かが手伝ってくれる？

編集：私は疲れて、#を見過ごしています、それを指摘してくれてありがとう、それと$.prop()。

javascripthtmlradio-button
73
ptf

CSS/JQuery構文（識別子として#）をネイティブJSと混在させないでください。

ネイティブJSソリューション：

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

JQueryソリューション：

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

120
zavg

「1234」ボタンを設定したい場合は、その「id」を使用する必要があります。

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

ブラウザAPI（ "getElementById"）を使用しているときは、セレクタ構文は使用しません。探している実際の "id"値を渡すだけです。 jQueryまたは.querySelector()と.querySelectorAll()でセレクタ構文を使用します。

13
Pointy

次のように、最も簡単な方法はおそらく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>
6
Esser

今日、2016年は、IDを知らなくてもdocument.querySelectorを使用するのが節約できます（特に2つ以上のラジオボタンがある場合）。

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

document.getElementById()関数を使うことで、要素のidの前に#を渡す必要がなくなります。

コード：

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

デモ： JSFiddle

1
Daniel Kmak