kintone

【kintone】チェックボックスの内容によって表示・非表示を切り替える|JavaScriptサンプル

【kintone】チェックボックスの内容によって表示・非表示を切り替える

kintone(キントーン)の標準機能でできないところをJavaScriptやCSSを使って実現しています。

評価:3.5

今回はチェックボックスを選択した時に別の項目を表示・非表示にする方法です。

完成形

「パソコン有無」が「有」の時は、右側の「OS」チェックボックスを表示、「無」の時は、右側の「OS」チェックボックスを非表示にします。

「有」を選択

「有」を選択したら表示

「無」を選択

「無」を選択したら非表示

フィールド定義

フィールドタイプ フィールド名 フィールドコード
チェックボックス パソコン有無 pc
チェックボックス OS os

チェックボックスの内容を取得する方法

モンキー
モンキー
チェックボックスは配列で格納されてるよ
ピンキー
ピンキー
じゃあ、indexOfで配列を検索すればいいね
if (record['pc']['value'].indexOf('有') > -1) {
  // 「有」にチェックがある時
}

「indexOf」は完全一致

「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つを選択

「有」と「無」両方チェックされた場合は、ラジオボタンのようにいずれか1つだけ選択してもらえるようJavaScriptでエラーチェックを追加します。


この記事は、2020.8.9時点の情報です。