kintone(キントーン)の標準機能でできないところをJavaScriptやCSSを使って実現しています。
評価:3.5
今回はチェックボックスを選択した時に別の項目を表示・非表示にする方法です。
目次
完成形
「パソコン有無」が「有」の時は、右側の「OS」チェックボックスを表示、「無」の時は、右側の「OS」チェックボックスを非表示にします。
「有」を選択
「無」を選択
フィールド定義
フィールドタイプ | フィールド名 | フィールドコード |
---|---|---|
チェックボックス | パソコン有無 | pc |
チェックボックス | OS | os |
チェックボックスの内容を取得する方法
モンキー
チェックボックスは配列で格納されてるよ
ピンキー
じゃあ、indexOfで配列を検索すればいいね
if (record['pc']['value'].indexOf('有') > -1) {
// 「有」にチェックがある時
}
「indexOf」は完全一致
「indexOf」は部分一致ではないので注意!完全一致です!
下のように「有り」を判定する場合は「indexOf(‘有り’)」と記述します。
JavaScript サンプルコード
(function() {
"use strict";
/*
* 登録画面・編集画面・一覧画面/保存ボタンクリック時
*/
function editSubmit(event) {
// レコード取得
var record = event.record;
// 「有」「無」いずれか1つを選択
if (record['pc']['value'].length > 1) {
record['pc']['error'] = 'いずれか1つを選択してください';
}
return event;
}
/*
* 登録画面・編集画面・一覧画面/パソコン有無が変更された時
*/
function changePc(event) {
// レコード取得
var record = event.record;
// 「有」の時、OSを表示
if (record['pc']['value'].indexOf('有') > -1) {
kintone.app.record.setFieldShown('os', true);
} else {
// 「無」の時、OSを非表示
kintone.app.record.setFieldShown('os', false);
record['os']['value'] = []; // OS:配列の初期化
}
return event;
}
/* ------------------------------------------------------------------ */
// 登録画面・編集画面・一覧画面/保存ボタンクリック時
kintone.events.on(['app.record.create.submit',
'app.record.edit.submit',
'app.record.index.edit.submit'], editSubmit);
// 登録画面・編集画面・一覧画面/パソコン有無が変更された時
kintone.events.on(['app.record.create.change.pc',
'app.record.edit.change.pc',
'app.record.index.edit.change.pc'], changePc);
})();
チェックボックスの初期化はこれ1行書くだけ
チェックボックスの初期化は、JavaScriptで1行書くだけ。
サンプルコードの34行目でやってます。
record['os']['value'] = []; // OS:配列の初期化
ラジオボタンにしなかった理由
ラジオボタンにすると必須項目なります。「パソコン有無」を必須項目にしたくないので、チェックボックスにしました。
「有」と「無」両方チェックされた場合は、ラジオボタンのようにいずれか1つだけ選択してもらえるようJavaScriptでエラーチェックを追加します。