

<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ランキング
-
javascriptでEnterキーをtabキ...
-
javascript テキストエリアを1...
-
大量のチェックボックス状態取...
-
javascriptでフォーカスを当て...
-
MAX関数を使ってからLEFT JOIN...
-
Ctrl+F(検索)の窓を出したいの...
-
HPB_SCRIPT_ROV_50
-
【HP作成】クリックすると下...
-
プルダウンの位置がwin/macでず...
-
数ある中からランダムで抽出し...
-
画像をクリックすると音が鳴り...
-
文字をクリックしたら別の文字...
-
javascriptテキストBOX色を元に...
-
読み込んだQRコードをフォーム...
-
eclipseでcssを使うためには?
-
jQueryでクリックされた要素のi...
-
デフォルト非表示にしたい。【t...
-
createElementで作成した要素を...
-
JSで動的にリンクを作成
-
seleniumbasic chrome操作について
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
javascriptでEnterキーをtabキ...
-
同一ページ内で、任意の文字列...
-
ネストされたチェックボックス...
-
【javascript で動的に a タグ...
-
タブ切り替えの初期表示について
-
ドラックアンドドロップ?
-
SleniumBasicでコンパイルエラ...
-
gridstack.jsについて教えてく...
-
jqueryのsortableで一部ソート...
-
マウスオーバーで開閉できるア...
-
多階層ドロップダウンのスマホ...
-
jQueryでネスト構造の<li>がク...
-
質問に答えていくと、回答によ...
-
「jQuery」アコーディオンメニ...
-
複数のラジオボタン項目でのテ...
-
jquery ドロップダウンメニュー...
-
クリックした<a>タグのみにClas...
-
JqueryFileTree.js でフォルダ...
-
javascriptでフォーカスを当て...
-
Jquery の slide.toggle で要素...
おすすめ情報