

<ul>
<li><input type="checkbox" name="A" value="">親A
<ul>
<li><input type="checkbox" name="B" value="" class="second">子A
<ul><li><input type="checkbox" name="C" value="" class="second">孫A</li>
</li>
</ul>
</li>
</ul>
<ul>
<li><input type="checkbox" name="A" value="">親B
<ul>
<li><input type="checkbox" name="B" value="" class="second">子B
<ul><li><input type="checkbox" name="C" value="" class="second">孫C</li>
</li>
</ul>
</li>
</ul>
3 階層あり、親、子や孫にチェックを入れた時に、その全てに連動してチェックされる方法は
ありますでしょうか ?
親だけチェックして子や孫もチェックされるのはできるのですが、逆ができません。
ちなみに同じつくりのものが下に続くのですが、A と B は連動せず、
ID NAMEも同じものです。
どうぞ、わかる方お願いいたします。
No.1ベストアンサー
- 回答日時:
構造さえ確定できればできないことはないと思いますが
親をチェックして、子孫にチェックがはいる仕組みなら
孫や子をチェックすると親や子にチェックがはいるとなると
常にすべて同じチェック状態になっちゃいますけどそれって意味あります?
つまり、
親をチェック→子・孫にチェックがはいる
子をチェック→親・孫にチェックがはいる
孫をチェック→親・子にチェックがはいる
つまりどこか一つのチェックで十分では?
No.2
- 回答日時:
なさりたいこととその意味がいまいちわかってないのですが・・・
ドキュメント上で最上位に当たるLI要素まで辿って、その子孫のinput[type='checkbox']に全てチェックをいれるってことと解釈しました。(チェックを外すときは処理対象外)
※ ご提示のHTMLはulの閉じタグの数が合わないので、構造が
はっきりしません。(適当に閉じタグを追加しました)
※ 一番外側のulは一つになると思えるのですが、そうはなって
いないので、包含要素としてdiv要素を追加しています。
最初に書いたようにあまり理解できていないので、ご参考までに・・・
(全角空白は半角に)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head><title>sample</title>
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/javascript">
function hoge(evt){
var e = evt.target || evt.srcElement, li;
if(e.nodeName != "INPUT" || e.type != "checkbox" || !e.checked) return;
while(e){
if(e.nodeName == "LI") li = e;
e = e.parentNode;
}
if(!li) return;
var elms = li.querySelectorAll("input[type='checkbox']");
for(var i = 0; e = elms[i++];) e.checked = true;
}
</script>
</head>
<body>
<div onclick="hoge(event)">
<ul>
<li><input type="checkbox" name="A" value="">親A
<ul>
<li><input type="checkbox" name="B" value="" class="second">子A
<ul><li><input type="checkbox" name="C" value="" class="second">孫A</li></ul>
</li>
</ul>
</li>
</ul>
<ul>
<li><input type="checkbox" name="A" value="">親B
<ul>
<li><input type="checkbox" name="B" value="" class="second">子B
<ul><li><input type="checkbox" name="C" value="" class="second">孫C</li></ul>
</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
<tr>指定した表の行要素をボ...
-
その要素がjQueryでremove()済...
-
初心者です。gulpでコンパイル...
-
スマホ上で、左右スワイプで次...
-
jQueryで同じクラス名のものを...
-
<div>のタッチ状態を維持したま...
-
jQueryでシンセサイザーを作っ...
-
Colorboxがうまく設置できません
-
フォームが空欄の時にフォーム...
-
イラストレーター、縦中横のシ...
-
タグを教えてください。
-
ラジオボタンを複数選択したと...
-
jsで質問です。 formをsubmitし...
-
2025年相性がいい人のサイトの...
-
CookieをWebStoeageに変える
-
Adobe acrobat proでフォームを...
-
Outlookのアカウントがあるとメ...
-
jqueryのselect2で検索欄の文字...
-
食材の期限を管理するためにGAS...
-
ビデオのJSについて
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
jsonテキストデータの並び替え...
-
スマホ上で、左右スワイプで次...
-
viewport幅
-
ラジオボタンを複数選択したと...
-
<tr>指定した表の行要素をボ...
-
ボタンを押したあとに画像を表...
-
画面遷移を行わずに同一ページ...
-
イラストレーター、縦中横のシ...
-
GASでチェックボックスを一括of...
-
jqueryのselect2で検索欄の文字...
-
初心者です。gulpでコンパイル...
-
階層別の組織図の自動作成について
-
セレクトを全て選択されていな...
-
セレクトボックスで配列を呼び...
-
タグを教えてください。
-
jsで質問です。 formをsubmitし...
-
Adobe acrobat proでフォームを...
-
任意の変数が任意の値になった...
-
jsで質問です。 ボタンが二つ存...
-
2段階プルダウンで1段階目の選...
おすすめ情報