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

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

ただいまの
回答率

88.09%

【JQuery】ラジオボタンとチェックボックス混合のツリー表示をしたい。

受付中

回答 1

投稿

  • 評価
  • クリップ 1
  • VIEW 1,679

score 12

 前提・実現したいこと

現在、下記画像のようなツリー表示を実現したいです。
仕様としては
・ラジオボタン二択の必須選択
・"個別選択"を選択した場合はチェックボックスによるツリー表示で複数選択可能
・ツリー表示の内容はDBから取得

イメージ説明
※画像はhtmlでべた書きしてる状態です。

 試したこと

チェックボックス部分のツリー表示内容はDBから取得し、
JSON形式で流し込む予定だったのでfancytreeを使用する予定でした。
しかし、上手くラジオボタンの動きとチェックボックスの動きが共存できなく困っています。
具体的には
①ラジオボタンを2回クリックするとチェックが外れる。(チェックボックスみたいになる)
②チェックボックス含め1個のみ選択可能になる。(ラジオボタンみたいになる)

jstreeなどいろいろ探してみましたが解決しませんでした。
fancytreeでの解決策、他プラグインでの解決策などご教授下さい。

fancytreeのソースです。※②の事象になるソースです。

$("#tree1").fancytree({
    checkbox: "radio",
    icon: false,
    selectMode: 2,
    source: [
        {title: "全て選択", selected: true, },
        {title: "個別選択", radiogroup: false, children: [
            {title: "A(10)", checkbox: true},
            {title: "B(24)", checkbox: true},
        ]}
    ],
});
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 1

0

状況がよくわかりませんが、こういう感じ?

<style>
.r_c[value=one]+div{display:none;}
.r_c[value=one]:checked+div{display:block;}
.block{height:100px;width:80px;overflow-y:scroll;}
.block label{display:block;height:1em;}
</style>
<div><input type="radio" name="r1" class="r_c" value="all" checked>all</div>
<div><input type="radio" name="r1" class="r_c" value="one" >select one
<div class="block">
<label><input type="checkbox" name="c1[]" value="a">a</label>
<label><input type="checkbox" name="c1[]" value="b">b</label>
<label><input type="checkbox" name="c1[]" value="c">c</label>
<label><input type="checkbox" name="c1[]" value="d">d</label>
<label><input type="checkbox" name="c1[]" value="e">e</label>
<label><input type="checkbox" name="c1[]" value="f">f</label>
<label><input type="checkbox" name="c1[]" value="g">g</label>
</div>
<div><input type="radio" name="r2" class="r_c" value="all" checked>all</div>
<div><input type="radio" name="r2" class="r_c" value="one" >select one
<div class="block">
<label><input type="checkbox" name="c2[]" value="a">a</label>
<label><input type="checkbox" name="c2[]" value="b">b</label>
<label><input type="checkbox" name="c2[]" value="c">c</label>
<label><input type="checkbox" name="c2[]" value="d">d</label>
<label><input type="checkbox" name="c2[]" value="e">e</label>
<label><input type="checkbox" name="c2[]" value="f">f</label>
<label><input type="checkbox" name="c2[]" value="g">g</label>
</div>

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2018/11/08 14:38

    インタフェースを少し変えていいならselect multipleでよいような気もしますが

    キャンセル

  • 2018/11/08 15:00

    そうです。まさしくその通りです。
    これをfancytreeもしくはjstreeなどのプラグインで実現したいです。

    キャンセル

  • 2018/11/08 15:06

    > プラグインで実現したい

    構造は変えられないので、cssでできることをプラグインでやる必要があるのでしょうか?
    どうしてもというなら見せる・消すくらいはやってもいいでしょうけど
    (もちろんdisabledをいじるならjsは必要です)

    キャンセル

  • 2018/11/08 15:40

    チェックボックス内の表示情報をDBから取得し、流し込みで表示したいので、
    htmlにべた書きはできないためです。
    また表示情報を配列で渡し、それ以外はオプションのtrue、falseなどで設定可能かと思い
    それであれば初心者の私でもできると思いプラグインでの実現を行おうと考えました。

    キャンセル

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

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

関連した質問

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