チェックボックスの値の取得

Question

要件

• あるボタンが押されとき、チェックボックスのチェックされている数を数えたい

現状

初期値がfalse（ボタンを押したときの状態は関係なし）のチェックボックスの状態を取得する際にdocument.getelementbyIdで取得しようとするとCannot read property 'checked' of nullエラーが出てしまいます。初期値がtrueのチェックボックスをfalseにしたときはdocoument...で取得が可能です。初期値がfalseのチェックボックスはどうやったら取得できるのでしょうか？
アプリケーションはvueですが、共通部品の関係で素のjavascriptを使うしかない状況です。

初期値のbool値によって取得できるかできないかが決まる？？

//初期値がtrueの時は以下で取得できるがfalseだと取得できない
document.getElementById('row_0').checked

チェックボックスの初期値がfalseの時に値を取得（というか初期値がどっちでも値を取得）できるような書き方はないでしょうか？？？

Comments

[退会済みユーザー]

<input id="row_0" type="checkbox" />
これでdocument.getElementById("row_0")で普通に取れますし、
vue.jsのサンプルも見に行きましたがgetElementByIdで問題なく取れました。
idが間違っているのでは？（ソースがないので判別できませんが）

[sanezane]

説明不足ですみません。
APIからチェックボックス値を取得してきて、boolの値がtrueの場合はご指摘の記述で取得できるんですが、falseをチェックボックスへ格納すると、その値をdocument.getelement...で取得するときにプロパティがnullである内容のエラーが出る。という事象です。

通常は、初期値がtrueだろうがfalseだろうがdocument.getele....で取得できるハズという認識で良いでしょうか？？だとすると私が何か別のミスをしてしまっている可能性がある。。。という切り分けができます。。。

[退会済みユーザー]

trueかfalseかって、inputタグにcheckedつけるかつけないかくらいなので取得はできるはずです。
trueかfalseかで、inputタグそのものを表示したり消したりなどしていなければ・・・

そもそも、画像では開発者ツールを開いているのですから、直接その要素があるかどうか見てみては？？

[H40831]

チェックボックスの初期値が直接の原因でないことは、自分でコード書いてみればわかるはずです。
「他のやり方を知りたいけど、コードは開示しない」ってスタンスで回答できるのはエスパーの方だけだと思います。
開示できる範囲（HTMLのinputタグの箇所とか）だけでももうすこし見せてもらえないとなんとも。

[KoichiSugiyama]

値をAPIから取得してチェックボックスにセットしている個所や、チェック取得している周辺のコードを提示されてみてはいかがでしょうか。これだけの限られた情報では回答も付きにくいと思います。

[m.ts10806]

再現できるコードがないと「そういうコードを書いてくれ」という依頼であり質問にはなってません

Answer 1

エラーが出たら、エラーメッセージを読みましょう。
Cannot read property 'checked' of null
とあります。

「nullの'checked'が読めない」のです。
つまりあなたのコードは、2番目のチェックボックスではなく
nullに対してcheckedを読もうとしているからです。

document.getElementById('row_0')
document.getElementById('row_1')

を実行すればよくわかるでしょう。
row_1がないだけです。あなたの言う「素のJavaScript」の以前にあなたがコードミスをしていて、row_1が生成されていないのです。

初期値がtrueの時は以下で取得できるがfalseだと取得できない

そんなわけありません。
エラーが出たら即質問するのではなく、今回のような場合は以下をまず試すようにしてみてください。

• row_0の初期値をfalseにして試す
• row_1の初期値をtrueにして試す
• document.getElementById('row_1')で試す

Answer 2

初期値のbool値によって取得できるかできないかが決まる？？

そんなことはありません。ちゃんとdocument内に当該のIDがあるか確認してください（Vue.jsで生成したものとなると、生成前のタイミングで取得しようとして失敗、ということも考えられます）。

Comments

[sanezane]

おっしゃる通りIDの生成がうまくいってませんでした。お騒がせしました。以後、気をつけます。

Answer 3

とりあえず、ベースだけ

<input type="checkbox" id="row_0" checked>
<input type="checkbox" id="row_1">

<script>
console.log(document.getElementById('row_0').checked)
document.getElementById('row_0').checked=false;
console.log(document.getElementById('row_0').checked)
console.log(document.getElementById('row_1').checked)
</script>

とくに何の問題もないです
ソースの問題ではないなら、OSやブラウザなど動作環境の問題かも

Answer 4

初期値がfalse（ボタンを押したときの状態は関係なし）のチェックボックスの状態を取得する際にdocument.getelementbyIdで取得しようとするとCannot read property 'checked' of nullエラーが出てしまいます。初期値がtrueのチェックボックスをfalseにしたときはdocoument...で取得が可能です。初期値がfalseのチェックボックスはどうやったら取得できるのでしょうか？

参考リンク貼っておきます。
的確な回答はコードを見ないとできません。

https://qiita.com/k_0214/items/672c5db1184a46b99273
http://blog.livedoor.jp/tsune55-work/archives/1751419.html
https://teratail.com/questions/190875