kintone

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

【kintone】チェックボックスの内容によって表示・非表示を切り替える
kintoneの標準機能でできないところをJavaScriptやCSSを使って実現しています。

評価:3.5

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

完成形

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

「有」を選択

「有」を選択したら表示

「無」を選択

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

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

モンキー
モンキー
チェックボックスは配列で格納されてるよ
ピンキー
ピンキー
じゃあ、indexOfで配列を検索すればいいね

techmeets

techmeets

フィールド定義

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

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

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

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