# 【フォームブリッジ】 チェックボックスの選択項目の下にそれぞれ説明文を追加したい

**URL:** <https://community.cybozu.dev/t/topic/7618>\
**Category:** kintone 開発相談\
**Created:** [2022 年 8 月 8 日午前 8:07 UTC](https://community.cybozu.dev/t/topic/7618 "2022-08-08T08:07:35Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![Legacy\_Account771](https://avatars.discourse-cdn.com/v4/letter/l/ed8c4c/32.png) [@Legacy\_Account771](https://community.cybozu.dev/u/Legacy_Account771)\
**Post date:** [2022 年 8 月 8 日午前 8:07 UTC](https://community.cybozu.dev/t/topic/7618/1 "2022-08-08T08:07:35Z")

</div>

フォームブリッジで作成したチェックボックス選択肢にリンク付き説明文を追加したいのですが、実装方法が分かりません。

どのようにカスタマイズしたらできるのか、どうかご教授下さい。

&nbsp;

---

<div class="post-metadata">

**Author:** ![Legacy\_Account2229](https://avatars.discourse-cdn.com/v4/letter/l/ce7236/32.png) [@Legacy\_Account2229](https://community.cybozu.dev/u/Legacy_Account2229)\
**Post date:** [2022 年 8 月 12 日午前 1:06 UTC](https://community.cybozu.dev/t/topic/7618/2 "2022-08-12T01:06:52Z")

</div>

杉田 典子さん

こんにちは。

&nbsp;

以下で各チェックボックスの要素を取得できます。

```
fb.getElementByCode('チェックボックスのフィールドコード').getElementsByClassName('fields')[0].childNodes[i]

```

ここに説明文のdiv要素を追加します。

CHECKBOX\_DESCRIPTION配列に各説明文を定義しておき、繰り返し処理にすれば簡潔に書けます。

```
(() => {

    'use strict';

    fb.events.form.mounted = [state => {

        // 説明文の配列
        const CHECKBOX_DESCRIPTION = [
            ['説明文1', 'http://www.yahoo.co.jp/'],
            ['説明文2', 'https://www.google.com/'],
            ['説明文3', 'https://www.bing.com/']
        ]

        for (let i = 0; i < CHECKBOX_DESCRIPTION.length; i++) {
            const el = document.createElement('a');
            el.textContent = CHECKBOX_DESCRIPTION[i][0]; // 説明文
            el.href = CHECKBOX_DESCRIPTION[i][1]; // リンク
            el.setAttribute('target', '_blank');
            el.setAttribute('rel', 'noopener noreferrer');
            el.style.marginLeft = '30px';
          fb.getElementByCode('チェックボックスのフィールドコード').getElementsByClassName('fields')[0].childNodes[i].appendChild(el);
        }

        return state;

    }];

})();

```

---

<div class="post-metadata">

**Author:** ![Legacy\_Account771](https://avatars.discourse-cdn.com/v4/letter/l/ed8c4c/32.png) [@Legacy\_Account771](https://community.cybozu.dev/u/Legacy_Account771)\
**Post date:** [2022 年 8 月 15 日午後 12:28 UTC](https://community.cybozu.dev/t/topic/7618/3 "2022-08-15T12:28:18Z")

</div>

ご教授いただき、ありがとうございます。

こちらのコードを参考にして希望通りの動きが出来ました。

---

<div class="post-metadata">

**Author:** ![Legacy\_Account771](https://avatars.discourse-cdn.com/v4/letter/l/ed8c4c/32.png) [@Legacy\_Account771](https://community.cybozu.dev/u/Legacy_Account771)\
**Post date:** [2022 年 8 月 15 日午後 12:53 UTC](https://community.cybozu.dev/t/topic/7618/4 "2022-08-15T12:53:43Z")

</div>

追加で質問させて頂きます。

スマートフォンで表示する際に説明文＆リンクが非表示となってしまいますが、

表示は出来ないのでしょうか。

別のカスタマイズで表示可能でしたら、こちらもご教授頂けると幸いです。

---

<div class="post-metadata">

**Author:** ![Legacy\_Account2229](https://avatars.discourse-cdn.com/v4/letter/l/ce7236/32.png) [@Legacy\_Account2229](https://community.cybozu.dev/u/Legacy_Account2229)\
**Post date:** [2022 年 8 月 15 日午後 11:52 UTC](https://community.cybozu.dev/t/topic/7618/5 "2022-08-15T23:52:40Z")

</div>

「スマートフォン用フィールドの設定」を使われてますか？

この場合はHTMLの要素が変わるため、コードが異なります。

&nbsp;

前段は省略しますが、

fb.getElementByCode(‘チェックボックスのフィールドコード’).getElementsByClassName(‘el-button mobile-button el-button–default’)[i]

で各チェックボックスの要素を取得できますので、これらに対して説明文の要素をappendChildで追加します。

```
for (let i = 0; i < CHECKBOX_DESCRIPTION.length; i++) {
    const el = document.createElement('a');
    el.style.display = 'block';
    el.textContent = CHECKBOX_DESCRIPTION[i][0]; // 説明文
    el.href = CHECKBOX_DESCRIPTION[i][1]; // リンク
    el.setAttribute('target', '_blank');
    el.setAttribute('rel', 'noopener noreferrer');
    el.style.marginLeft = '30px';
  fb.getElementByCode('チェックボックスのフィールドコード').getElementsByClassName('el-button mobile-button el-button--default')[i].appendChild(el);
}

```

---

<div class="post-metadata">

**Author:** ![Legacy\_Account771](https://avatars.discourse-cdn.com/v4/letter/l/ed8c4c/32.png) [@Legacy\_Account771](https://community.cybozu.dev/u/Legacy_Account771)\
**Post date:** [2022 年 8 月 17 日午前 3:04 UTC](https://community.cybozu.dev/t/topic/7618/6 "2022-08-17T03:04:40Z")

</div>

ありがとうございます。

スマートフォン用は別の要素で取得しなければいけないのですね。

ご教授いただいたコードでやってみます。

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex015/uploads/cybozu/original/1X/d5c841c3c5a6cb66eed514001c1b45147c9e1f4f.png) [@system](https://community.cybozu.dev/u/system)\
**Post date:** [2024 年 9 月 4 日午前 5:41 UTC](https://community.cybozu.dev/t/topic/7618/7 "2024-09-04T05:41:13Z")

</div>

このトピックはベストアンサーに選ばれた返信から 3 日が経過したので自動的にクローズされました。新たに返信することはできません。