javascriptで上から順にチェックボックス値取得

javascriptにおいて動的にnameやidが変わるcheckboxの値の取得の仕方を教えてください。
下記のコードを実行しましたが、lengh NULlが帰ってきてしまいました。

javascript
1 var form = document.forms[0];// <form>要素
2for (var i = 0; i < form.length; i++) {
3var elem = form[i].value;
4alert(elem);
5}

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

回答3件

ベストアンサー

古い書き方だとこんな感じ

javascript
1window.onload=function(){
2  var n = document.getElementsByTagName('input');
3  for (var i = 0; i < n.length; i++) {
4    if(n[i].type=="checkbox"){
5      console.log(n[i].value);
6    }
7  }
8}
9

もちろんformをつかんで要素を走査しても構いません

今風だとこう？

javascript
1window.onload=function(){
2  var n = document.querySelectorAll('input[type=checkbox]');
3  for (var i = 0; i < n.length; i++) {
4    console.log(n[i].value);
5  }
6}

投稿2017/03/23 00:47

yambejp

総合スコア117709

おそらくDOMが表示される前に値を読もうとしているんじゃないでしょうか。

https://developer.mozilla.org/en-US/Add-ons/Code_snippets/On_page_load

以下のようにOnloadなどのイベントの発火を待つ必要があると思います。

window.addEventListener("load", function readValues() {
 window.removeEventListener("load", readValues);
  const form = document.forms[0];
  const values = (form || []).map(elm => ((elm || {}).value || ""));
  console.log(values);
}), false);

投稿2017/03/23 01:58

shuntksh

総合スコア196

的外れかもしれませんが、このように行うのはどうでしょうか？

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="utf-8">
5    <title>タイトル</title>
6    <style type="text/css">
7        * {
8            margin: 0;
9            padding: 0;
10        }
11    </style>
12</head>
13<body>
14    <form action="" method="post">
15        <label>項目1
16            <input type="checkbox" name="check0" id="check0" value="項目1">
17        </label>
18        <label>項目2
19            <input type="checkbox" name="check1" id="check1" value="項目2">
20        </label>
21        <label>項目3
22            <input type="checkbox" name="check2" id="check2" value="項目3">
23        </label>
24    </form>
25    <div id="box"></div>
26    <script>
27        setInterval(function() {
28            document.getElementById("box").innerHTML = "";
29            for (let i = 0; i < document.getElementsByTagName("input").length; i++) {
30                if (document.getElementsByTagName("input")[i].type === "checkbox") {
31                    document.getElementsByTagName("input")[i].id = Math.floor(Math.random() * 129);
32                    document.getElementsByTagName("input")[i].name = Math.floor(Math.random() * 129);
33                    document.getElementById("box").innerHTML += "id属性: " + document.getElementsByTagName("input")[i].id + ", name属性: " + document.getElementsByTagName("input")[i].name + ", checked属性: " + ((document.getElementsByTagName("input")[i].checked) ? "チェックされている。" : "チェックされていない。") + ", value属性: " + document.getElementsByTagName("input")[i].value + "<br>";
34                }
35            }
36        }, 1000);
37    </script>
38</body>
39</html>