つらい・・・

ネストされたチェックボックスの子孫要素にチェックを入れると、親要素にもチェックされる

解決済

質問者：R.
質問日時：2015/05/06 23:09
回答数：2件

<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も同じものです。

どうぞ、わかる方お願いいたします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

うーん・・・

No.1ベストアンサー

回答者： yambejp
回答日時：2015/05/07 09:46

構造さえ確定できればできないことはないと思いますが

親をチェックして、子孫にチェックがはいる仕組みなら
孫や子をチェックすると親や子にチェックがはいるとなると
常にすべて同じチェック状態になっちゃいますけどそれって意味あります？

つまり、
親をチェック→子・孫にチェックがはいる
子をチェック→親・孫にチェックがはいる
孫をチェック→親・子にチェックがはいる

つまりどこか一つのチェックで十分では？

- 0
- 件

通報する

参考程度に

No.2

回答者： fujillin
回答日時：2015/05/07 11:31

なさりたいこととその意味がいまいちわかってないのですが・・・

ドキュメント上で最上位に当たるＬＩ要素まで辿って、その子孫の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>