Show and Hide Fields Using Check boxes

Contents

Overview

This sample code shows and hides fields depending on the choices selected in the Check box field.

Sample Image

Prepare the App

Create an App (External link) with the following fields and settings.

Field Type Field Name Field Code Notes
Check box Choice Choice
Text Text TextField
Table Table TableField See the table below for the fields to place inside.
Field group Group GroupField See the group below for the fields to place inside.

Set the following fields and settings for the Table field.

Field Type Field Name Field Code Notes
Text Text Table_text
Number Number Table_number

Set the following fields and settings for the Group field.

Field Type Field Name Field Code Notes
Text Text Group_text
Number Number Group_number

Sample Code 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

// Show and hide fields based on check box choices

(function() {
  'use strict';

  var CHOICE = 'Choice'; // field code of checkbox field
  var TEXT = 'TextField'; // field code of text field to display/hide
  var TABLE = 'TableField'; // field code of table field to display/hide
  var GROUP = 'GroupField'; // field code of group field to display/hide
  var events = ['app.record.create.show', 'app.record.edit.show',
    'app.record.create.change.' + CHOICE, 'app.record.edit.change.' + CHOICE];

  kintone.events.on(events, function(event) {
    var record = event.record;
    var choiceVal = record[CHOICE].value;

    // State which checkbox labels will display/hide fields
    if (choiceVal.indexOf('Text') >= 0) {
      kintone.app.record.setFieldShown(TEXT, true);
    } else {
      kintone.app.record.setFieldShown(TEXT, false);
    }

    if (choiceVal.indexOf('Table') >= 0) {
      kintone.app.record.setFieldShown(TABLE, true);
    } else {
      kintone.app.record.setFieldShown(TABLE, false);
    }

    if (choiceVal.indexOf('Group') >= 0) {
      kintone.app.record.setFieldShown(GROUP, true);
    } else {
      kintone.app.record.setFieldShown(GROUP, false);
    }

    return event;
  });
}());