ラジオボタンに対するjavaScriptのチェック処理

はじめまして。
以下のようなラジオボタンに対し、選択肢１に対するチェック状態をtrueにするようなjavaScript
を実装したいと考えています。

xhtml
1<h:inputHidden>
2  <f:viewParam name="select" value="#{SomeBean.select}" id="select"/>
3</h:inputHidden>
4<span class="label-txt">
5  <div class="radio">
6    <input id="1" name="select" class="radio__input" type="radio" value="0" />
7    <label for="1" class="checkbox" ><span class="image"></span>選択肢１</label>
8    <input id="2" name="select" class="radio__input" type="radio" value="1" />
9    <label for="2" class="checkbox"><span class="image"></span>選択肢２</label>
10  </div>
11</span>

現在のところ、下記のようなjavascriptを実装していますが、実行しても
うまくチェック状態になってくれません。

javascript
1 function writeKoumoku() {
2//試したもの１
3document.getElementById("1").checked = true;
4//試したもの２
5$('#1').prop('checked',true);
6｝

トリガーとなるボタンは以下のように実装しています。

xhtml
1<input type="button"  class="button grid-09-px button__function button__function--slim" value="打鍵補助用スクリプトの実行" onclick="writeKoumoku()"/>

どなたか知識のある方、選択肢１の状態をcheckedにするjavascriptの実装方法をご教授ください。

■追記
⇒上記のxhtml内にボタンを配置し、押下時にonclick属性でjavaScriptを実行し、チェック状態にしたいと考えています。

よろしくお願いします。

kei344

2017/08/22 17:16

JavaScriptの読み込み場所や、どのようなタイミングでチェック状態をtrueにするのかなど、もう少し詳しく質問文を編集してください。

strokes_1954

2017/08/22 17:17

申し訳ございませんでした。すぐ対応させていただきます。

x_x

2017/08/23 04:37

onclick属性がないようですが？

strokes_1954

2017/08/23 04:39

申し訳ございません。onclick属性のボタンに関しては省略して書いていましたので、修正させていただきます。

kei344

2017/08/23 04:51

jsfではなく出力されたHTML（ブラウザで「ページのソースを表示」）を質問文に追記ください。

行動規範の内容に同意します

回答4件

idの付け方がおかしいのは既にご指摘があるとおりですが
ラジオボタンは必ずnameが設定されているはずですのでこうしてもよいかもしれません

javascript
1document.querySelector("[name=select]:first-child")["checked"]=true;

投稿2017/08/23 00:35

yambejp

総合スコア114784

問題のある記述があるものの、現行ブラウザでは動作するのでわからなかったのですが、ここにきて判明しました。
単純なことですが、打ち間違いです。

JavaScript
1//試したもの２
2$('#1').prop('checked',true);
3// ｝ // 全角
4}

投稿2017/08/23 06:28

x_x

総合スコア13749

id属性は数字から始めてはいけないことになっています（参考）。

id='1'を、英字始まりの値に変えればうまくいくかもしれません。

投稿2017/08/22 22:37

maisumakun

総合スコア145183

kei344

2017/08/23 02:21

HTML5から大丈夫みたいですよ。【HTML Standard 日本語訳】 https://momdo.github.io/html/dom.html#global-attributes > IDを取ることができる形式に制限は存在しない。具体的に、IDは数字のみまたは句読点のみで構成することができ、数字やアンダースコアで開始できる、などである。

maisumakun

2017/08/23 02:31

あら、そうだったんですね。ありがとうございます。

x_x

2017/08/23 05:05

CSSセレクタとして使えないのではないですか？ https://www.w3.org/TR/CSS21/syndata.html#value-def-identifier > they cannot start with a digit, two hyphens, or a hyphen followed by a digit. (識別子は、数字、2つのハイフン、ハイフンの直後の数字で開始できない。)

kei344

2017/08/23 06:18

To: x_xさんそうですね、新しい仕様で上書きされていないかいくつか見てみましたが、その部分は書き換わっていないようでした。「HTML5では"0"をidに指定できるがCSSからは（仕様的に）参照できない」ということなのですね･･･。試してみると、Win Firefox/Chrome/IE でJavaScriptでの取得ができました。そしてCSSは当然効きませんでした。 https://jsfiddle.net/oubwuj02/

行動規範の内容に同意します

試したもの１で可能かと思いますが...一度以下のようにして試していただけませんか？

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <title>タイトル</title>
6</head>
7<body>
8<div class="label-txt"><!-- 文法的にNG -->
9    <div class="radio">
10        <input id="1" name="select" class="radio__input" type="radio" value="0"/>
11        <label for="1" class="checkbox"><span class="image"></span>選択肢１</label>
12        <input id="2" name="select" class="radio__input" type="radio" value="1"/>
13        <label for="2" class="checkbox"><span class="image"></span>選択肢２</label>
14    </div>
15</div>
16<script>
17    document.addEventListener("DOMContentLoaded", function () {
18        document.getElementById("1").checked = true;
19    });
20</script>
21</body>
22</html>