チェックボックスの選択肢によってフィールドの表示/非表示を切り替えたい(ラベル)

Legacy_Account1480 · 2017 年 6 月 28 日午前 10:57

お世話になっております。

タイトルの件について、

チェックボックスに選択肢1～3まであり、項目が1～6まであります。

選択肢1にチェックが入れば、項目1～2を表示し、チェックを外せば非表示になる

選択肢2にチェックが入れば、項目3～5を表示し、チェックを外せば非表示になる

選択肢1と3にチェックが入れば、項目1～2と項目6が表示するようにしたいと考えております。

現在下記コードで設定しているのですが、

選択肢1をチェック⇒選択肢2をチェック⇒選択肢2のチェックを外す

と行うと、選択肢2のチェックを外しても、項目3～5が表示されっぱなしとなっております。

(function () {
    "use strict";
    var events = ['app.record.detail.show',
                  'app.record.create.show',
                  'app.record.edit.show',
                  'app.record.create.change.チェックボックス',
                  'app.record.edit.change.チェックボックス'
                  ];
    kintone.events.on(events, function(event) {
        var record = event.record;
        var Cybozu = record['チェックボックス']['value'];
        if (Cybozu.length === 0) {
            kintone.app.record.setFieldShown('項目1', false);
            kintone.app.record.setFieldShown('項目2', false);
            kintone.app.record.setFieldShown('項目3', false);
            kintone.app.record.setFieldShown('項目4', false);
            kintone.app.record.setFieldShown('項目5', false);
            kintone.app.record.setFieldShown('項目6', false);
            return event;
        }
        for (var i = 0; i < Cybozu.length; i++) {
            if (Cybozu[i] === '選択肢1') {
                kintone.app.record.setFieldShown('項目1', true);
                kintone.app.record.setFieldShown('項目2', true);
            }
            else if (Cybozu[i] === '選択肢2') {
                kintone.app.record.setFieldShown('項目3', true);
                kintone.app.record.setFieldShown('項目4', true);
                kintone.app.record.setFieldShown('項目5', true);
            }
            else if (Cybozu[i] === '選択肢3') {
                kintone.app.record.setFieldShown('項目6', true);
            }
        }
        return event;
    });
})();

お手数でございますが、ご確認お願い致します。

また、選択肢によってラベルの表示、非表示を設定したいのですが、ラベルはフィールドコードが設定できないので、やはり無理でしょうか？

ご教授いただければ幸いです。

Legacy_Account1740 · 2017 年 6 月 29 日午前 12:48

Nao様

お世話になっております。
サイボウズスタートアップスの江田です。

ご提示いただいたコードですと、チェックボックスがどれも選択されていない状態でのみ、非表示に切り替えるようになっています。
if文をなくして、チェックボックスの値が変更されたときは一旦全て項目を非表示にしてあげればよいと思います。

また、for文で回さなくても、javascriptでは配列にある値が含まれているかを調べるindexOfというメソッドがあるので、そちらを利用すると、「選択肢1と3にチェックが入れば、項目1～2と項目6が表示する」というのも簡単に実装できるかと思います。

以下コードを書いてみたので、参考になればと思います。

Legacy_Account1480 · 2017 年 6 月 29 日午前 2:20

江田篤史様

ご返信ありがとうございます。

ご教授いただいたコードで設定しましたら、実装ができました。

あと、もう一点確認なのですが、質問の本文中にも書かせていただいたのですが、

選択肢によってラベルの表示、非表示を設定したいのですが、ラベルはフィールドコードが設定できないので、やはり無理でしょうか？

ご教授いただければ幸いです。

Legacy_Account1740 · 2017 年 6 月 29 日午前 3:23

Nao様

setFieldShownはラベルには使用できません。
代わりに、jQueryのshow、hide等を用いて実装は可能です。

セレクタに「.control-label-field-gaia」を指定して、showおよびhide使うことで表示非表示の切り替えができます。
ラベルのある行のdivごと表示非表示を切り替えたいのであれば、セレクタは「.row-gaia:has(.control-label-field-gaia)」にして頂ければよいかと思います。
(例：$(‘.row-gaia:has(.control-label-field-gaia)’).show()

ただし、アップデートによってDOM要素のクラス名等は変更される可能性があるので注意が必要です。

Legacy_Account1480 · 2017 年 6 月 29 日午前 4:12

江田篤史様

ご返信ありがとうございます。

「代わりに、jQueryのshow、hide等を用いて実装は可能です。」

上記についてですが、下記のようなコードということでしょうか？

(function () {
"use strict";
var events = ['app.record.detail.show',
'app.record.create.show',
'app.record.edit.show',
'app.record.create.change.チェックボックス',
'app.record.edit.change.チェックボックス'
];
kintone.events.on(events, function(event) {
var record = event.record;
var Cybozu = record['チェックボックス']['value'];
kintone.app.record.setFieldShown('項目1', false);
kintone.app.record.setFieldShown('項目2', false);
kintone.app.record.setFieldShown('項目3', false);
kintone.app.record.setFieldShown('項目4', false);
kintone.app.record.setFieldShown('項目5', false);
kintone.app.record.setFieldShown('項目6', false);
$('.row-gaia:has(.control-label-field-gaia)').show();//項目1用ラベルの非表示
$('.row-gaia:has(.control-label-field-gaia)').show();//項目2用ラベルの非表示
$('.row-gaia:has(.control-label-field-gaia)').show();//項目3用ラベルの非表示
$('.row-gaia:has(.control-label-field-gaia)').show();//項目4用ラベルの非表示
$('.row-gaia:has(.control-label-field-gaia)').show();//項目5用ラベルの非表示
$('.row-gaia:has(.control-label-field-gaia)').show();//項目6用ラベルの非表示

if (Cybozu.indexOf('選択肢1') != -1) {
kintone.app.record.setFieldShown('項目1', true);
kintone.app.record.setFieldShown('項目2', true);
$('.row-gaia:has(.control-label-field-gaia)').hide();//項目1用ラベルの表示
$('.row-gaia:has(.control-label-field-gaia)').hide();//項目2用ラベルの表示
}
if (Cybozu.indexOf('選択肢2') != -1) {
kintone.app.record.setFieldShown('項目3', true);
kintone.app.record.setFieldShown('項目4', true);
kintone.app.record.setFieldShown('項目5', true);
$('.row-gaia:has(.control-label-field-gaia)').hide();//項目3用ラベルの表示
$('.row-gaia:has(.control-label-field-gaia)').hide();//項目4用ラベルの表示
$('.row-gaia:has(.control-label-field-gaia)').hide();//項目5用ラベルの表示
}
if (Cybozu.indexOf('選択肢3') != -1) {
kintone.app.record.setFieldShown('項目6', true);
$('.row-gaia:has(.control-label-field-gaia)').hide();//項目6用ラベルの表示
}
return event;
});
})();

また、control-label-field-gaiaについて、

項目1用ラベルや項目2用ラベルを指定したいのですが、特定のID等が割り当てられていないのですが、

指定することは可能でしょうか？

※:nth-child(n)等で指定する方法はありますでしょうか？

度々お手数でございますが、ご確認お願い致します。

Legacy_Account1480 · 2017 年 6 月 29 日午前 4:36

お世話になっております。

連投ですみません。

上記「jQueryのshow、hide等」は、どのライブラリを指定すれば宜しいでしょうか。

サイボウズで用意しているライブラリ内(https://js.cybozu.com/～)にありますでしょうか。

初心者の為、初歩的な質問ですみません。

Legacy_Account1740 · 2017 年 6 月 29 日午前 4:48

Nao様

jQueryでは、eq()メソッドにて要素を個別に抽出できます。

(function () {
"use strict";
var events = [
'app.record.detail.show',
'app.record.create.show',
'app.record.edit.show',
'app.record.create.change.チェックボックス',
'app.record.edit.change.チェックボックス'
];
kintone.events.on(events, function(event) {
var record = event.record;
var Cybozu = record['チェックボックス']['value'];
kintone.app.record.setFieldShown('項目1', false);
kintone.app.record.setFieldShown('項目2', false);
kintone.app.record.setFieldShown('項目3', false);
kintone.app.record.setFieldShown('項目4', false);
kintone.app.record.setFieldShown('項目5', false);
kintone.app.record.setFieldShown('項目6', false);
$('.row-gaia:has(.control-label-field-gaia)').hide();//項目1~6用ラベルの非表示
if (Cybozu.indexOf('選択肢1') != -1) {
kintone.app.record.setFieldShown('項目1', true);
kintone.app.record.setFieldShown('項目2', true);
$('.row-gaia:has(.control-label-field-gaia)').eq(0).show();//項目1用ラベルの表示
$('.row-gaia:has(.control-label-field-gaia)').eq(1).show();//項目2用ラベルの表示
}
if (Cybozu.indexOf('選択肢2') != -1) {
kintone.app.record.setFieldShown('項目3', true);
kintone.app.record.setFieldShown('項目4', true);
kintone.app.record.setFieldShown('項目5', true);
$('.row-gaia:has(.control-label-field-gaia)').eq(2).show();//項目3用ラベルの表示
$('.row-gaia:has(.control-label-field-gaia)').eq(3).show();//項目4用ラベルの表示
$('.row-gaia:has(.control-label-field-gaia)').eq(4).show();//項目5用ラベルの表示
}
if (Cybozu.indexOf('選択肢3') != -1) {
kintone.app.record.setFieldShown('項目6', true);
$('.row-gaia:has(.control-label-field-gaia)').eq(5).show();//項目6用ラベルの表示
}
return event;
});
})();

Legacy_Account1740 · 2017 年 6 月 29 日午前 4:55

jQueryについては、GoogleのCDN(Content Delivery Network)にホストされているので、
JavaScript / CSSでカスタマイズのページから、URL指定で追加で、
https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js
と入力してみてください。

また、自分で書いたコードよりjQueryが先に読み込まれるようにするのを忘れないよう気を付けてください。

Legacy_Account1480 · 2017 年 6 月 29 日午前 5:02

江田篤史様

早速のご回答ありがとうございます。

ご教授いただいたように設定して無事、動作致しました。

indexOfメソッド、jQuery show hide、eq()メソッド、GoogleCDN

と沢山勉強になりました。本当にありがとうございます。

今後ともよろしくお願いいたします。

Legacy_Account1059 · 2019 年 6 月 14 日午前 2:30

お世話になります。

初心者のご質問でもうしわけありませんが、どうやって表示ページの特定のラベルに該当する下記のようなeq()の番号がわかりますか？

「$(‘.row-gaia:has(.control-label-field-gaia)’).eq(0).show();//項目1用ラベルの表示」

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

「ラベルのある行のdivごと表示非表示を切り替えたいのであれば、セレクタは「.row-gaia:has(.control-label-field-gaia)」にして頂ければよいかと思います。」

上記について私のコードの場合はHTMLをみてもdivに行情報がありませんし、どんなラベルを見ても下記のように<div>ラベル名</div> == $0 と表示されるので、ちょっと混乱しております。

ご指導をお願い致します。

トピック		返信	表示
複数のチェックボックスで他フィールドの表示・非表示を設定 kintone カスタマイズ	4	214	2017 年 6 月 20 日
チェックボックスにて自動でチェックが入るようにしたが、ほかの項目のチェックが外れてしまう。 kintone カスタマイズ	1	197	2021 年 9 月 2 日
チェックボックスで表示、非表示 kintone カスタマイズ	1	250	2020 年 8 月 4 日
チェックボックスの値で特定のフィールどを必須項目にする方法 kintone カスタマイズ	2	232	2019 年 12 月 10 日
文字列複数行を表示すると kintone カスタマイズ	5	91	2020 年 1 月 13 日

チェックボックスの選択肢によってフィールドの表示/非表示を切り替えたい(ラベル)

関連トピック