JavaScript：チェックボックスでチェックした項目のvalueを取得したい

###前提・実現したいこと
いつもお世話になっております。

チェックボックスでチェックされている項目の値を取得したいと思いまして以下のようにしました。
しかし、ボタンを押すとアラートには[object Nodelist]と表示されてしまいます。

書き方が悪いのかと思いますが、どこを直せば良いのかわからず行き詰まってしまいましたのでご教授いただけないでしょうか。

よろしくお願いいたします。

###該当のソースコード

<script language="JavaScript">
function inq_checked(){
    var elements = document.getElementsByName('room_check') ;
    alert(elements);
}
</script>

<button type="button"  onclick="javascript:inq_checked();">チェックした項目</button>
<input type="checkbox" name="room_check" value="赤"></label>
<input type="checkbox" name="room_check" value="青"></label>
<input type="checkbox" name="room_check" value="黄"></label>

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

回答4件

ベストアンサー

roomchackが複数あるので、ノードの配列として取得されていると言うことです。

JavaScript
1function inq_checked(){
2    var elements = document.getElementsByName('room_check') ;
3    for(var i = 0 ; i < elements.length ; i ++){
4      if(elements[i].checked == true){
5        alert(elements[i].value);
6      }
7    }
8}

こんな感じですると、チェックボックスがついているモノが取得できますよ

投稿2017/01/19 06:27

退会済みユーザー

総合スコア0

igaiga

2017/01/22 00:56

ありがとうございます。まずobject Nodelistの意味を調べるべきでしたね。。。ご指摘いただいた方法で値の取得ができました。

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

なんか他の人と変わり映えしません
まとめてalertするパターンです

javascript
1<script>
2function inq_checked(){
3  var ret="";
4  var ele=document.getElementsByName('room_check');
5  for(var i=0;i<ele.length;i++){
6    if(ele[i].checked){
7      if(ret!=="") ret+=",";
8      ret+=ele[i].value;
9    }
10  };
11  alert(ret);
12}
13</script>
14
15<button type="button"  onclick="inq_checked();">チェックした項目</button>
16<input type="checkbox" name="room_check" value="赤"></label>
17<input type="checkbox" name="room_check" value="青"></label>
18<input type="checkbox" name="room_check" value="黄"></label>

投稿2017/01/19 07:23

yambejp

総合スコア114839

html
1<!DOCTYPE html>
2<html>
3	<head>
4		<title></title>
5		<meta charset="UTF-8">
6		<meta name="viewport" content="width=device-width, initial-scale=1.0">
7	</head>
8	<body>
9		<button type="button" id="check">チェックした項目</button>
10		<label>
11			<input type="checkbox" name="room_check[]" value="赤"> 赤
12		</label>
13		<label>
14			<input type="checkbox" name="room_check[]" value="青"> 青
15		</label>
16		<label>
17			<input type="checkbox" name="room_check[]" value="黄"> 黄
18		</label>
19		<script type="text/javascript">
20			function check_selected_value() {
21				var checkboxes = document.getElementsByName('room_check[]');
22				for (var i = 0; i < checkboxes.length; i++) {
23					if (checkboxes[i].checked) {
24						var val = checkboxes[i].value;
25						alert(val);
26					}
27				}
28			}
29			document.getElementById('check').addEventListener('click', function () {
30				check_selected_value();
31			});
32		</script>
33	</body>
34</html>
35