javascript チェックボックスで、指定のチェックを入れると他のチェックも入るようにしたい

お世話になります。

webページを作成する際に、親となるチェックボックスをチェックするとその子となるチェックボックスの中身にもチェックをいれたいです。

例：
親 □関東 □関西 □東海
子 □東京 □千葉・・・ □愛知 □岐阜 □三重

親で東海をチェックしたら、愛知、岐阜、三重に自動でチェックを入れたいです。

他のサイトで参考にしたコード

<html>
<head>
<script language="javascript" type="text/javascript">
function autochk(f){
for(var i=0;i<f.form.length;i++){
if (f!=f.form.elements[i]){f.form.elements[i].disabled = !f.checked;}
}
}
</script>
</head>
<body>
<form>
<input type="checkbox" name="oya" value="1" checked onclick="autochk(this);">親
<input type="checkbox" name="ko1" value="1" checked>子1
<input type="checkbox" name="ko2" value="1" checked>子2
<input type="checkbox" name="ko3" value="1" checked>子3
<input type="checkbox" name="ko4" value="1" checked>子4
</form>
</body>
</html>

上記を使用したサイトを見ると親をチェックすると子が全部チェックされます。
上記のコードを使用し色々試しましたが自分のやりたいことがうまく出来ませんでした。

・親をチェックしない限り、子が単独でチェックできない
・関東、関西などに分けて登録するやり方がわからなかった

以上です
すいませんがご教授よろしくお願いいたします。

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

回答3件

ベストアンサー

html
1<!DOCTYPE HTML>
2<html lang="ja">
3	<head>
4		<meta charset="UTF-8">
5		<title></title>
6	</head>
7	<body>
8		<div id="wrap">
9			<form action="">
10
11				<H2>地域</H2>
12
13				<div>
14					<label>
15						<input type="checkbox" name="large_area" value="1" />
16						北海道・東北
17					</label>
18
19					<label>
20						<input type="checkbox" name="large_area" value="2" />
21						関東
22					</label>
23				</div>
24
25				<H2>都道府県</H2>
26
27				<div>
28					<label>
29						<input type="checkbox" name="prefecture" value="1" data-largearea="1" />
30						北海道
31					</label>
32					<label>
33						<input type="checkbox" name="prefecture" value="2" data-largearea="1" />
34						青森
35					</label>
36					<label>
37						<input type="checkbox" name="prefecture" value="3" data-largearea="1" />
38						岩手
39					</label>
40					<label>
41						<input type="checkbox" name="prefecture" value="4" data-largearea="1" />
42						秋田
43					</label>
44					<label>
45						<input type="checkbox" name="prefecture" value="5" data-largearea="1" />
46						宮城
47					</label>
48					<label>
49						<input type="checkbox" name="prefecture" value="6" data-largearea="1" />
50						福島
51					</label>
52				</div>
53
54				<div>
55					<label>
56						<input type="checkbox" name="prefecture" value="7" data-largearea="2" />
57						群馬
58					</label>
59					<label>
60						<input type="checkbox" name="prefecture" value="8" data-largearea="2" />
61						栃木
62					</label>
63					<label>
64						<input type="checkbox" name="prefecture" value="9" data-largearea="2" />
65						茨城
66					</label>
67					<label>
68						<input type="checkbox" name="prefecture" value="10" data-largearea="2" />
69						埼玉
70					</label>
71					<label>
72						<input type="checkbox" name="prefecture" value="11" data-largearea="2" />
73						東京
74					</label>
75					<label>
76						<input type="checkbox" name="prefecture" value="12" data-largearea="2" />
77						千葉
78					</label>
79					<label>
80						<input type="checkbox" name="prefecture" value="13" data-largearea="2" />
81						神奈川
82					</label>
83				</div>
84			</form>
85		</div>
86		<script type="text/javascript" src="//code.jquery.com/jquery-2.2.4.min.js"></script>
87		<script type="text/javascript">
88			$(function () {
89				//$("[name=prefecture]").prop('disabled', true);
90
91				$("[name=large_area]").on('click', function () {
92					$("[name=prefecture]")
93							.filter("[data-largearea=" + $(this).val() + "]")
94							.prop('checked', $(this).prop('checked'));
95							//.prop('disabled', !$(this).prop('checked'));
96				});
97			});
98		</script>
99	</body>
100</html>

投稿2016/10/11 07:23

編集2016/10/11 09:30

退会済みユーザー

総合スコア0

satoshi501

2016/10/11 08:02

ありがとうございます。チェックの内容を分けることができました。ただ、もう一つの疑問の・親をチェックしない限り、子が単独でチェックできないが解決できません。これは修正できないものなのでしょうか？

退会済みユーザー

2016/10/11 08:03

やってありますけど‥

satoshi501

2016/10/11 08:31

すいません　自分が改定した部分でうまく行っていないみたいです。 <script type="text/javascript" src="//code.jquery.com/jquery-2.2.4.min.js"></script> 教えて頂いた上記のsrcで読み込むと単独でチェックはできますが、親と子が連動しませんでした。ですので上記の部分を <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> という風に変更しました。変更したことで親と子が連動するようにはなりましたが、今度は単独でチェックできなくなってしまいましたすいませんjqueryの読み込み方が間違っているんでしょうか？

退会済みユーザー

2016/10/11 08:39

ソースを提示されていない状況で、第三者が判断できるわけありません。エスパーじゃありませんから。

satoshi501

2016/10/11 09:03

いえ、教えていただいたソースをそのまま使用しています。

退会済みユーザー

2016/10/11 09:07

そのままというのは、提示したソースのみを使っています？変に編集するよりは、そのまま実行すれば動きますよ。ローカルじゃダメだけど。

satoshi501

2016/10/11 09:16

はい、そのままのをFTPで上げてネットよりテストしているんですが、どうしても親にチェックを入れずに子のチェックが単独でチェックできませんでした。使用しているエクスプローラーはGooglechromeとsafariです。（ちょっと手元にIEがないのでテストしていません）

退会済みユーザー

2016/10/11 09:18 編集

「親をチェックしない限り、子が単独でチェックできない」というのが要件なのですからその通り作っただけですよ。仕様通りだと思いますが。

satoshi501

2016/10/11 09:27

すいません自分の書き方が悪かったです。最初に提示したコードを使用して作成し、困っている部分として「親をチェックしない限り、子が単独でチェックできない」という意味で書いたつもりでした。つまり子が単独でもチェックできるようにしたいです。

退会済みユーザー

2016/10/11 09:31

不要な部分をコメントアウトしておきました。

satoshi501

2016/10/11 10:10

何度もお手数をおかけしてすいませんでした。教えていただいたやり方でクリアできました。ありがとうございました！

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

子を囲って親の次の要素を指定してはどうでしょうか？

html
1<input type="checkbox" name="oya" value="1" checked onclick="autochk(this);">親
2<div class="child">
3<input type="checkbox" name="ko1" value="1" checked>子1
4<input type="checkbox" name="ko2" value="1" checked>子2
5<input type="checkbox" name="ko3" value="1" checked>子3
6<input type="checkbox" name="ko4" value="1" checked>子4
7</div>