jQueryでチェックボックスの値をPOSTしたい。

###前提・実現したいこと
jQueryでチェックボックスの値をPOSTしたいと思っています。
jQuery.ajaxを使う事になると思うのですが、name属性が同じものが複数ある場合のやり方が分かりません。
ご教授頂けないでしょうか。

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

html
1<p><input type="checkbox" name="all" value="all" id="all">：全てにチェック</p>
2<p><input type="checkbox" name="name[]" value="前田">：前田</p>
3<p><input type="checkbox" name="name[]" value="高橋">：高橋</p>
4<p><input type="checkbox" name="name[]" value="村田">：村田</p>

jQuery
1	// 「全てにチェック」のチェックボックスをチェックしたら発動
2	$('#all').change(function() {
3		// もし「全てにチェック」のチェックが入ったら
4		if ($(this).prop('checked')) {
5			// チェックを付ける
6			$('input[name="name[]"]').prop('checked', true);
7		// もしチェックが外れたら
8		} else {
9			// チェックを外す
10			$('input[name="name[]"]').prop('checked', false);
11		}
12		$.post('test.php', {
13			name[]: $('input[name="name[]"]').val(),
14		}, function(rs) {
15			$("#rightSide").html($('#rightSide', rs).html());
16		});
17	});

php
1
2<?php
3test.php
4
5if ($_SERVER['REQUEST_METHOD'] == 'POST') {
6	$names = $_POST['name'];
7
8	var_dump($names);
9
10}
11
12

###試したこと
name[]: ←この部分を
name: ←左記のように書き換えると
サーバーのlogファイルにはPOSTされている事が確認できたのですが、
nameの全てのデータは、取得できません。

###補足情報(言語/FW/ツール等のバージョンなど)
jquery-ui-1.11.4

退会済みユーザー

2016/12/07 09:59

test.phpのソースコードも追記してくださるとうれしいです。

hiroppii

2016/12/07 11:11

修正が遅くなりすみません。test.phpのソースコードを追加しました。

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

回答3件

ベストアンサー

test.phpが追記されましたが、結果をわかりやすくするためにtest.phpの内容は以下のコードとさせていただきます。

PHP
1<?php
2if (isset($_POST['city'])) {
3    if (is_array($_POST['city'])) {
4        $name = implode(":", $_POST["city"]);
5        $fp = fopen('test.txt', 'a');
6        fwrite($fp, $name);
7        fclose($fp);
8    }
9}

本題

まず下のコードをごらんください。

javascript
1$('input[name="name[]"]').val()

これを質問者さんはチェックボックスの値すべてを取り出す目的で書いたものだと思われます。
しかし、このようなコードだと、一番上のname[]の値しか取り出されないので、mapでチェックボックスの値を全部とりだしてあげる必要があります。そうすると、この部分はこのようにかけます。

javascript
1$("input[name='name[]']").map(
2    function () {
3        return $(this).val();
4    }
5).get();

つまり、コード全体は以下のようになります。
質問者さんのコードに間違っているところがあったので修正も行いました。修正した箇所にはコメントを入れました。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="utf-8">
5    <title>タイトル</title>
6</head>
7<body>
8<form>
9    <p><input type="checkbox" name="all" value="all" id="all">：全てにチェック</p>
10    <p><input type="checkbox" name="name[]" value="前田">：前田</p>
11    <p><input type="checkbox" name="name[]" value="高橋">：高橋</p>
12    <p><input type="checkbox" name="name[]" value="村田">：村田</p>
13</form>
14<script src="//code.jquery.com/jquery-3.1.1.min.js"></script>
15<script>
16    $(function () {
17        $('#all').change(function () {
18            if ($(this).prop('checked')) {
19                $('input[name="name[]"]').prop('checked', true);
20            } else {
21                $('input[name="name[]"]').prop('checked', false);
22            }
23            $.post('test.php', {
24                        'city[]': $("input[name='name[]']").map(
25                                function () {
26                                    return $(this).val();
27                                }).get()
28                    },
29                    function (rs) {
30                        $("#rightSide").html($('#rightSide', rs).html());
31                    }
32            );
33        });
34    });
35</script>
36</body>
37</html>
38

投稿2016/12/07 10:37

編集2016/12/07 11:51

退会済みユーザー

総合スコア0

hiroppii

2016/12/07 15:15

回答有難う御座います。ご教授頂いた通り、実装したところ無事、POST出来ました。また、詳細に教えて頂いたので、分かり易かったです。本当に有難う御座いました。

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

jsonでおくりたいならパラメータをname[0],name[1]・・・・のようにユニークにする

javascript
1$(function(){
2  $('[name="name[]"]').on('change',function(){
3    var data={};
4    $('[name="name[]"]:checked').each(function(){
5      var index=$('[name="name[]"]:checked').index(this);
6      data["name["+index+"]"]=$(this).val();
7    });
8    $.ajax({
9    url:"test.php",
10    dataType:"json",
11    type:"post",
12    data:data,
13    success:function(text){
14      console.log(text);
15    },
16    });
17  });
18});

テキストでおくるならつなげるだけ

javascript
1$(function(){
2  $('[name="name[]"]').on('change',function(){
3    var data="";
4    $('[name="name[]"]:checked').each(function(){
5      data+=(data==""?"":"&")+"name%5B%5D="+encodeURIComponent($(this).val());
6    });
7    $.ajax({
8    url:"test.php",
9    dataType:"json",
10    type:"post",
11    data:data,
12    success:function(text){
13    console.log(text);
14    },
15    });
16  });
17});

投稿2016/12/07 11:21

yambejp

総合スコア114821

hiroppii

2016/12/07 15:31

回答有難う御座います。 jsonで、送る方法があるのは知っていたのですが、よく理解していなかったので、勉強になりました。有難う御座います。尚、今回のベストアンサーは詳細にご教授頂いた s8.chu さんにさせて頂きました。

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

html
1<!DOCTYPE HTML>
2<html lang="ja">
3	<head>
4		<meta charset="UTF-8">
5		<title></title>
6	</head>
7	<body>
8		<form action="">
9			<p><label><input type="checkbox" name="all" value="all" id="all">：全てにチェック</label></p>
10			<p><label><input class="name" type="checkbox" name="name[]" value="前田">：前田</label></p>
11			<p><label><input class="name" type="checkbox" name="name[]" value="高橋">：高橋</label></p>
12			<p><label><input class="name" type="checkbox" name="name[]" value="村田">：村田</label></p>
13		</form>
14		<script type="text/javascript" src="//code.jquery.com/jquery-3.1.1.min.js"></script>
15		<script type="text/javascript">
16			$(function () {
17				$('#all').on('click', function () {
18					$(".name").prop('checked', $(this).prop('checked'));
19
20					$.post('test.php'
21							, $('form').serialize()
22							, function (rs) {
23//							$("#rightSide").html($('#rightSide', rs).html());
24							});
25				});
26			});
27		</script>
28	</body>
29</html>