<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で質問しましょう!
似たような質問が見つかりました
- HTML・CSS CSS のみのタブ切り替えについて 1 2023/01/11 16:47
- PHP 入力した部分を表示させたまま(保持)するにはどうすれば良いでしょうか? 1 2023/01/25 11:14
- HTML・CSS ただいま勉強始めたての初心者です。フォームを縦並べにしたいです。 2 2022/11/20 17:18
- PHP PHPの構文で間違えが分からない 5 2022/07/11 16:38
- PHP SQLとPHPの連結方法がわからないのでアドバイスお願い致します 1 2022/07/12 12:16
- HTML・CSS cssの display: flex;で横並びにならずに困ってます 1 2022/12/04 13:18
- JavaScript ①入力フォーム→②確認表示画面→③送信完了画面のコードを書いているのです、 入力フォームから受け取っ 2 2022/05/10 16:45
- PHP $_SESSIONについて教えて下さい。 2 2023/03/02 09:18
- JavaScript javascriptで移動ボタンを押した際に遷移するボタンを追記したい 1 2022/11/29 03:02
- PHP style.cssのjQuery条件付きcssが機能しない 4 2022/07/17 18:27
このQ&Aを見た人はこんなQ&Aも見ています
関連するカテゴリからQ&Aを探す
おすすめ情報
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
アコーディオンメニューの開閉制御
-
javascriptで、クリックしたら...
-
複数の画像をランダム(シャッ...
-
JQuery UIで、表示したタブの中...
-
クリックした<a>タグのみにClas...
-
アコーディオン自動開閉メニュ...
-
jQueryセレクタ/複数要素の指...
-
同一ページ内で、任意の文字列...
-
JQueryタブのアクティブ アン...
-
【jQuery】hoverしたn秒後にイ...
-
MAX関数を使ってからLEFT JOIN...
-
スタイルシートで画面を上下に...
-
JavaScript スライドの画像にリ...
-
textareaに画像を表示したい
-
javascriptでスタイルを動的に...
-
キャラクターがぴょこんと飛び...
-
OpenCV での画素値の比較について
-
HTMLで条件分岐はできますか?
-
Ctrl+F(検索)の窓を出したいの...
-
色の変更
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
jqueryのsortableで一部ソート...
-
クリックした<a>タグのみにClas...
-
JQueryタブのアクティブ アン...
-
javascriptでEnterキーをtabキ...
-
「jQuery」アコーディオンメニ...
-
【jQuery】遅延実行(タイムラ...
-
ネストされたチェックボックス...
-
【javascript で動的に a タグ...
-
jquery ドロップダウンメニュー...
-
文字と数字が混在する要素のsor...
-
Jquery の slide.toggle で要素...
-
【jQuery】hoverしたn秒後にイ...
-
チェックボックスに入っている...
-
クリックで表示、非表示するメ...
-
同一ページ内で、任意の文字列...
-
オンマウスで画像ロールオーバ...
-
javascriptで、クリックしたら...
-
PHPでログインフォーム
-
<li>タグの順番を入れ替える方法
-
jQuery タブメニューへのダイ...
おすすめ情報