分類別にグループ別けされたチェックボックスの選択および解除を行いたい

分類別にグループ別けされたチェックボックスの選択および解除を行いたいです。

以下のような関係のときに、例えば大分類である「和食」をチェックすると
和食全てをチェック状態にしたいです。

また、和食の【中分類】麺類をチェックすればそれに属するもの（そばとうどん）だけチェックしたいです。

<p><input type="checkbox"/>【大分類】和食</p> <p><input type="checkbox"/>【中分類】麺類</p> <p><input type="checkbox" />そば</p> <p><input type="checkbox" />うどん</p> <p><input type="checkbox"/>【中分類】肉料理</p> <p><input type="checkbox" />焼き鳥</p> <p><input type="checkbox" />焼肉</p> <p><input type="checkbox"/>【中分類】ご飯物</p> <p><input type="checkbox" />ライス</p> <p><input type="checkbox" />親子丼</p> <p><input type="checkbox"/>大分類・洋食</p> <p><input type="checkbox"/>【中分類】麺類</p> <p><input type="checkbox" />パスタ</p> <p><input type="checkbox"/>【中分類】肉料理</p> <p><input type="checkbox" />ステーキ</p> <p><input type="checkbox" />ハンバーグ</p> <p><input type="checkbox"/>【中分類】ご飯物</p> <p><input type="checkbox" />パエリア</p>

以下のようにメソッドで行いたく、参考にしながら試みましたがわたしの頭では無理でした・・・・。
http://oshiete.goo.ne.jp/qa/2578239.html。
出来れば上記のように、class=""等でグループングせず、divタグやpタグで実現したいです。

よろしければアドバイス宜しくお願い致します。

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

回答2件

ベストアンサー

class を使ったほうが良いと思いますが、使わないならこんな感じでしょうか

html
1<div>
2	<p><input type="checkbox"/>【大分類】和食</p>
3	<div>
4		<p><input type="checkbox"/>【中分類】麺類</p> 
5		<div>
6			<p><input type="checkbox" />そば</p> 
7			<p><input type="checkbox" />うどん</p> 
8		</div>
9		<p><input type="checkbox"/>【中分類】肉料理</p>
10		<div>
11			<p><input type="checkbox" />焼き鳥</p> 
12			<p><input type="checkbox" />焼肉</p>
13		</div>
14		<p><input type="checkbox"/>【中分類】ご飯物</p>
15		<div>
16			<p><input type="checkbox" />ライス</p> 
17			<p><input type="checkbox" />親子丼</p>
18		</div>
19	</div>
20</div>
21<div>
22	<p><input type="checkbox"/>大分類・洋食</p> 
23	<div>
24		<p><input type="checkbox"/>【中分類】麺類</p> 
25		<div>
26			<p><input type="checkbox" />パスタ</p> 
27		</div>
28		<p><input type="checkbox"/>【中分類】肉料理</p> 
29		<div>
30			<p><input type="checkbox" />ステーキ</p> 
31			<p><input type="checkbox" />ハンバーグ</p> 
32		</div>
33		<p><input type="checkbox"/>【中分類】ご飯物</p> 
34		<div>
35			<p><input type="checkbox" />パエリア</p>
36		</div>
37	</div>
38</div>
39<script>
40$("input").on("change", function(eve){
41	var checked = this.checked
42	$(this).parent().next("div").find("input").prop("checked", checked)
43})
44</script>