チェックボックスのチェックした内容を別の所に表示させてたいのですがどなたかご教授ください

標題の件なのですが
いろいろと調べたのですがうまくいかず困っています。
どなたかご教授ください。

＜やりたいこと＞
・チェックボックスでチェックした内容を別の部分に表示

・チェックボックスは複数あり
※例：都道府県・特徴と別々にチェック
下記のコードでやってみましたが都道府県と特徴がごっちゃになってしまう

・絞り込み検索後もチェックボックスにはphpでチェックがはいるようにしているのですが
別表示の部分は内容がなくなってしまいます。
※チェックしたい内容で絞り込み検索をしてGETで値を渡しています。

チェックボックスはjqueryのモーダルダイアログで都道府県・特徴を表示しております。

lang
1<script type="text/javascript">
2$(window).load(function(){
3var $c = $('input[type="checkbox"]');
4
5$c.bind('change', function(){
6    var add = '';
7    $c.each(function(index, value) {
8        if (this.checked){
9            //チェックと同時にlabelのfor属性の値をテキストとして表示する
10            add += ($('label[for="' + this.value + '"]').html() + ', ');
11        }
12    });
13    if (add.length > 0) {
14        //1個以上あるときは表示する
15        add = 'チェックしたアイテム: ' + add.substring(0, add.length - 2) + '.';
16    } else {
17        add = 'まだチェックされてません';
18    }
19    //id="show"内に挿入
20    $('#show').html(add);
21});
22});
23</script>

lang
1<label for="埼玉県"><input type="checkbox" name="xxx" value="埼玉県">埼玉県</label>
2<label for="東京都"><input type="checkbox" name="xxx" value="東京都">東京都</label>
3<label for="神奈川県"><input type="checkbox" name="xxx" value="神奈川県">神奈川県</label>
4
5
6<div id="show">まだチェックされてません</div>

何卒よろしくお願いします。

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

回答1件

ベストアンサー

コピペして適当な html で保存して動作をみてみてください。

東京都はあらかじめ初期表示状態で洗濯済みとしています。
つまり、次回再表示時にチェックが外れてしまうのは、"checked" をつけないからです。
value と等しいチェックボックスに PHP で checked をつけるようにすれば、画面表示
で自動的にチェックされた状態で再表示できます。

show のテキストも然りです。

lang
1
2<!DOCTYPE html>
3<html lang="ja">
4<head>
5<meta charset="utf-8">
6<meta http-equiv="X-UA-Compatible" content="IE=edge">
7<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
8<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
9<style>
10</style>
11<script>
12$(document).ready(function() {
13
14	// php から再表示されたときにチェックボックスのチェック状態に応じて
15	// 前回の操作状態を復帰する。PHP でやるのが普通で、JavaScript で
16	// やる場合は緊急・やっつけ的な意味合い（一般的にいうとおとなの都合）
17	// が強いと思う。
18	
19	function updateData() {
20		var arr = [];
21		$(":checked").each(function(o) {
22			arr.push($(this).val());
23		});
24		// １つ以上チェックされている時は、	show の内容を更新する。
25		if (arr.length > 0) {
26			$("#show").text(arr.join(", ") + " を選択しましたね！！");
27		}
28	}
29	$("input[type=checkbox]").click(function(e) {
30		updateData();
31	});
32	
33	updateData();
34});
35</script>
36</head>
37<body>
38<form>
39<!--
40   ラベル　タグは、チェックボックスを選択しても、ラベルを選択してもどっちでもチェックON/OFFできる
41   ようにするためのタグですよ。以下のように、チェックボックスの id と ラベルの for に指定する id
42   を合わせます。
43   
44-->
45<label for="saitama"><input type="checkbox" name="xxx" id="saitama" value="埼玉県">埼玉県</label>
46<label for="tokyo"><input type="checkbox" name="xxx" id="tokyo" value="東京都" checked>東京都</label>
47<label for="kanagawa"><input type="checkbox" name="xxx" id="kanagawa" value="神奈川県">神奈川県</label>
48</form>
49
50<div id="show">まだチェックされてません</div>
51</body>
52</html>