---
title: フォームに入力した値に応じて他の項目の表示・非表示を変更できますか？
description: コンテンツ定義の詳細設定でJavaScriptを入力できますので、こちらを利用して処理を書いてください。例えば、以下のコードはext_1に設定された複数選択チェックボックスのチェックの有無に基づいて、ext_2, ext_3のテキスト項目の表示を制御するJavaScriptです。
category: howto
---

import StructuredDataFaqs from '@site/src/components/StructuredDataFaqs';

<StructuredDataFaqs faqs={[
    { question: "フォームに入力した値に応じて他の項目の表示・非表示を変更できますか？", answer: "コンテンツ定義の詳細設定でJavaScriptを入力できますので、こちらを利用して処理を書いてください。例えば、以下のコードはext_1に設定された複数選択チェックボックスのチェックの有無に基づいて、ext_2, ext_3のテキスト項目の表示を制御するJavaScriptです。" }
]} />

コンテンツ定義の詳細設定でJavaScriptを入力できますので、こちらを利用して処理を書いてください。  

## 設定箇所
[コンテンツ定義編集](/ja/docs/management/content-structure-topics-group/#コンテンツ定義編集)の詳細設定のJavaScript項目。

![Image from Gyazo](https://t.gyazo.com/teams/diverta/a5bc50f796dc50ae422c3693c5f72d5d.png)

## コード例

例えば、以下のコードはext_1に設定された複数選択チェックボックスのチェックの有無に基づいて、
ext_2, ext_3のテキスト項目の表示を制御するJavaScriptです。

```js
{literal}
window.addEventListener('load', function() {
    // チェックボックスの状態に基づいて input 要素の表示を制御する関数
    function toggleInputVisibility() {
        // id="ext_1__1" のチェックボックスを取得
        var checkbox1 = document.getElementById('ext_1__1');
        // input[name="ext_2"] 要素を取得
        var inputText2 = document.querySelector('input[name="ext_2"]');
        if (inputText2) {
            // id="ext_1__1" のチェックボックスがチェックされているか確認
            inputText2.style.display = checkbox1.checked ? '' : 'none'; // チェックされていれば表示、そうでなければ非表示
        }

        // id="ext_1__2" のチェックボックスを取得
        var checkbox2 = document.getElementById('ext_1__2');
        // input[name="ext_3"] 要素を取得
        var inputText3 = document.querySelector('input[name="ext_3"]');
        if (inputText3) {
            // id="ext_1__2" のチェックボックスがチェックされているか確認
            inputText3.style.display = checkbox2.checked ? '' : 'none'; // チェックされていれば表示、そうでなければ非表示
        }
    }

    // ページ読み込み時に一度実行して初期状態を設定
    toggleInputVisibility();

    // チェックボックスの状態変更にも反応するようにイベントリスナーを設定
    document.body.addEventListener('change', function(event) {
        // 変更された要素が id="ext_1__1" または id="ext_1__2" のチェックボックスであるか確認
        if (event.target.id === 'ext_1__1' || event.target.id === 'ext_1__2') {
            toggleInputVisibility();
        }
    });
});
{/literal}
```

:::info
コンテンツ編集画面のinput要素はJavaScriptによって動的に生成されています。こちらを考慮して、JavaScriptの実行されるタイミング等を制御してください。  
:::

## 動作例

![Image from Gyazo](https://t.gyazo.com/teams/diverta/540e354b8297d2679931eb5e357bfb71.gif)