質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.34%

【jQuery】親・子・孫関係がある場合のslideToggle()

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 1,674

pecchan

score 368

こちらのおかげで親・子・孫関係のチェックボックスの実装が出来ました。
親のON・OFFで子と孫を連動、子のON・OFFで孫を連動しました。

ここまでは良かったのですが、以下の手順で操作すると意図した表示になりません。

1.親(本)をONにする→子・孫がONの状態で表示される。
2.子(コミック)をOFFにする→孫が全てOFFの状態、トグルで隠れる。
3.この状態で親(本)をOFFにする→子が全てOFFの状態、トグルで隠れる。
4.再び親(本)をONにする→1の状態で表示したいが、子までしか表示されない。

作りの問題だと思っていますが、4の時に1と同じく孫まで表示したいのですが分かりません。。。
どのような方法があるでしょうか?

宜しくお願い致します。

<p><input type="checkbox" id="book" value="01"/></p>
    <div id="book-group">
        <input type="checkbox" id="comic" value="001"/>コミック</p>
            <div id="comic-group">
                <p><input type="checkbox" name="books[]" value="1" id="1"/>ドラゴンボール </p>
                <p><input type="checkbox" name="books[]" value="2" id="2"/>ジョジョの奇妙な冒険 </p>
                <p><input type="checkbox" name="books[]" value="3" id="3"/>幽遊白書 </p>
            </div>
        <input type="checkbox" id="novel" value="002"/>小説</p>
            <div id="novel-group">
                <p><input type="checkbox" name="books[]" value="4" id="4"/>ソロモンの偽証 </p>
                <p><input type="checkbox" name="books[]" value="5" id="5"/>火花 </p>
                <p><input type="checkbox" name="books[]" value="6" id="6"/>コーヒーが冷めないうちに </p>
            </div>

        <input type="checkbox" id="magazine" value="003"/>雑誌</p>
            <div id="magazine-group">
                <p><input type="checkbox" name="books[]" value="7" id="7"/>VERY </p>
                <p><input type="checkbox" name="books[]" value="8" id="8"/>sweet </p>
            </div>
    </div>
// ページ読み込み完了後に実行
$(window).load(function(){

    //初期表示は全て非表示
     $('[id*=group]').css("display", "none");

});



$(function(){

    $("input").click(function () {


        //クリックされたチェックボックスのグループ名を取得
        var groupName = $(this).attr("id") + 'group';

        //グループ内のチェックボックスを取得
        var targets = $("#" + groupName).find("input");

        if(this.checked){
            targets.prop('checked', true);

        }else{
            targets.prop('checked', false);

        }

        //トグル
        $("#" + groupName).slideToggle();




    });
});
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+1

自分の下位は全部開かせる場合。

$( '#' + groupName ).slideToggle().find( '#' + groupName + '[id$="group"]' ).slideDown();


書かれたコードではここが問題で動かなかった。ちなみに<p>が数箇所足りません。

var groupName = $(this).attr("id") + '-group'; // 「-」が無かった

追記:

ミスを指摘しながら書きミスしていました、すいません。

$( '#' + groupName ).slideToggle().find( '[id$="group"]' ).slideDown();

動くサンプル https://jsfiddle.net/nfwnzszx/

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/05/28 11:57

    有難う御座います。

    以下記載ミスでした。すみません。
    ・<p>足りない
    ・'group'ではなく'-group'

    教えていただいた、find()で自分の下位を操作する方法、
    試しましたが動き変わらずでした・・・。


    キャンセル

  • 2016/05/28 13:15

    すいません、ミスがあったので回答に追記しました。

    キャンセル

  • 2016/05/28 13:33

    とんでもないです。
    度々すみませんでした。

    有難う御座います。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.34%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る