jQueryでcheckboxの値を取得して変数に配列で格納したい

チェックボックスを複数チェックした時にチェックされた値を
変数に配列として格納したいのですがうまくいきません。

例えば下記コードでは「A」と「C」がチェックされたときに
変数(checklist)に**[A,C]**として格納したいです。

ご教授ください。
よろしくお願いします。

html
1<form method="get" id="form_id" name="name" action="/">
2
3		<label><input type="checkbox" name="check" id="A" value="A">A</label>
4		<label><input type="checkbox" name="check" id="B" value="B">B</label>
5		<label><input type="checkbox" name="check" id="C" value="C">C</label>
6		<label><input type="checkbox" name="check" id="D" value="D">D</label>
7
8</form>

javascript
1<script type="text/javascript">
2	$("input[name='check']").change(function() {
3		if ($(this).prop('checked')) {
4			var checklist = (配列で格納したい);
5		}
6	});
7</script>

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

回答4件

例えばA＞B＞A＞C＞Aの順にマウスでクリックしたとして取得したい配列が["A","B","C","A"]なら

javascript
1<script type="text/javascript">
2var checklist = [];
3    $("input[name='check']").change(function() {
4        if ($(this).prop('checked')) {
5            checklist.push($(this).val());
6        }
7    });
8</script>

でいいのですが、
普通はA＞B＞A＞C＞Aの順にマウスでクリックした場合の取得したい配列は["A","B","C"]だと思うので
クリックした要素の値を調べて配列に入れるってことはせず、クリックしたタイミングで、そのときのチェックされている要素の値を配列に入れるっていうことをするべきだと思います。

なので、調べる要素はイベントを起こした要素$(this)ではなく、候補となる要素全体になるため $("input[name='check]")になります。
また、jqueryで同じセレクタの配列を取得するにはmap()とget()を使った形が便利ですのでそれを使って取得します。なお、チェックされているものだけを指定する場合はセレクタに:checkedをつければいいです。

javascript
1
2<script type="text/javascript">
3  $("input[name='check']").change(function() {
4    var checklist = $("input[name='check']:checked").map(function(){
5      return $(this).val();
6    }).get();
7  });
8</script>
9

※もちろん、イベントの発生はマウスのクリックだけでなくキーボードを使ったチェックでも同じです。わかりやすくするため、マウスのクリックって具体的に書いただけですので誤解なきよう

あと、他の方の回答で書かれているname属性の話ですが、formの受けるCGIが何かによってルールが違うため、単に[]を付けるっていうのはちょっと違います。[]を付けるっていうルールはPHPとかですね。

投稿2017/08/23 15:07

oskbt

総合スコア1895

m.ts10806

2017/08/24 00:16

ご指摘ありがとうございました。

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

HTML
1<!doctype html>
2<html lang="en">
3<head>
4	<meta charset="utf-8">
5	<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
6</head>
7<body>
8<form method="get" id="form_id" name="name" action="/">
9
10        <label><input type="checkbox" name="check" id="A" value="A1">A</label>
11        <label><input type="checkbox" name="check" id="B" value="B2">B</label>
12        <label><input type="checkbox" name="check" id="C" value="C3">C</label>
13        <label><input type="checkbox" name="check" id="D" value="D4">D</label>
14
15</form>
16<script type="text/javascript">
17	var checklist = [];
18	$("input[name='check']").change(function() {
19		checklist = [];
20		$("input[name='check']").filter(":checked").map(function() {
21			checklist.push($(this).val());
22		});
23		console.log(checklist);
24	});
25</script>
26</body>
27</html>

こんな感じ

投稿2017/08/23 14:16

rururu3

総合スコア5545

Te_PiN

2017/08/23 14:49

ありがとうございます。大変参考になりました。

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

ベストアンサー

こんなかんじかな。

HTML
1<form method="get" id="form_id" name="name" action="/">
2	<label><input type="checkbox" name="check[]" id="A" value="A">A</label>
3	<label><input type="checkbox" name="check[]" id="B" value="B">B</label>
4	<label><input type="checkbox" name="check[]" id="C" value="C" checked>C</label>
5	<label><input type="checkbox" name="check[]" id="D" value="D">D</label>
6</form>

JavaScript
1$( function() {
2	$( 'input[name="check[]"]' ).change( function() {
3		var checklist = [];
4		$( 'input[name="check[]"]:checked' ).each( function() {
5			checklist.push( $( this ).val() );
6		} );
7		console.log( checklist );
8	} ).eq( 0 ).change();
9} );
10```**動くサンプル：**[https://jsfiddle.net/taapydLc/](https://jsfiddle.net/taapydLc/)