杉田　典子さん

こんにちは。

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

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;

    }];

})();

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

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

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

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

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

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

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

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

前段は省略しますが、

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);
}

ありがとうございます。

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

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