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

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

新規登録して質問してみよう
ただいま回答率
85.48%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

1回答

4100閲覧

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

MORIZOU

総合スコア12

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

1クリップ

投稿2018/11/08 05:05

前提・実現したいこと

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

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

試したこと

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

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

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

jQuery

1$("#tree1").fancytree({ 2 checkbox: "radio", 3 icon: false, 4 selectMode: 2, 5 source: [ 6 {title: "全て選択", selected: true, }, 7 {title: "個別選択", radiogroup: false, children: [ 8 {title: "A(10)", checkbox: true}, 9 {title: "B(24)", checkbox: true}, 10 ]} 11 ], 12});

気になる質問をクリップする

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

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

javascript

1<style> 2.r_c[value=one]+div{display:none;} 3.r_c[value=one]:checked+div{display:block;} 4.block{height:100px;width:80px;overflow-y:scroll;} 5.block label{display:block;height:1em;} 6</style> 7<div><input type="radio" name="r1" class="r_c" value="all" checked>all</div> 8<div><input type="radio" name="r1" class="r_c" value="one" >select one 9<div class="block"> 10<label><input type="checkbox" name="c1[]" value="a">a</label> 11<label><input type="checkbox" name="c1[]" value="b">b</label> 12<label><input type="checkbox" name="c1[]" value="c">c</label> 13<label><input type="checkbox" name="c1[]" value="d">d</label> 14<label><input type="checkbox" name="c1[]" value="e">e</label> 15<label><input type="checkbox" name="c1[]" value="f">f</label> 16<label><input type="checkbox" name="c1[]" value="g">g</label> 17</div> 18<div><input type="radio" name="r2" class="r_c" value="all" checked>all</div> 19<div><input type="radio" name="r2" class="r_c" value="one" >select one 20<div class="block"> 21<label><input type="checkbox" name="c2[]" value="a">a</label> 22<label><input type="checkbox" name="c2[]" value="b">b</label> 23<label><input type="checkbox" name="c2[]" value="c">c</label> 24<label><input type="checkbox" name="c2[]" value="d">d</label> 25<label><input type="checkbox" name="c2[]" value="e">e</label> 26<label><input type="checkbox" name="c2[]" value="f">f</label> 27<label><input type="checkbox" name="c2[]" value="g">g</label> 28</div>

投稿2018/11/08 05:37

yambejp

総合スコア114814

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yambejp

2018/11/08 05:38

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

2018/11/08 06:00

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

2018/11/08 06:06

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

2018/11/08 06:40

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問