【intra-mart】Formaチェックボックスのテキストを取得

IM-FormaDesignerで作成した画面にて、チェックボックスで選択されたテキスト部分(ラベル)の文字列を取得するfunctionです。

サンプルコード

// 選択されたチェックボックスのテキストをカンマ区切りで取得する。
// fildId:フィールド識別ID
// return:選択されたチェックボックスの項目名(カンマ区切り)</p>
function getCheckedText(fildId){
    var checkedArray = [];
    $("input[name='item_" + fildId + "']:checked").siblings('span').each(function(i,e){checkedArray.push(e.innerText)});
    return checkedArray.join(',');
}

解説

span要素のinnerTextが必要なので一旦配列にpush。できあがった配列を結合(カンマ区切り)して返しています。

細かく分解して解説していきます。

①. 選択されているチェックボックスのinput要素を取得

$("input[name='item_XXXXX']:checked")

選択されているチェックボックスのinput要素をを取得します。name属性にはitem_ + フィールド識別ID が設定されるため、それを条件に取得します。

②. ①の兄弟(同階層)要素のうちspan要素を取得

$("input[name='item_XXXXX']:checked").siblings('span')

①で取得したinput要素と同じ階層に今回取得したい文字列があります。

なのでsibilings()を使用して兄弟要素を取得します。

④. ③をループさせてinnerTextを配列に格納する。

.each(function(i,e){checkedArray.push(e.innerText)})

チェックボックスは通常、複数選択が可能なのでループして選択された全てのInnerTextを取得します。

取得した値は配列へ格納しておきます。

参考

FormaDesignerでチェックボックスを配置すると以下のような要素が作成されます。
わかりやすくするため簡略化しています。参考までに。

・Formaチェックボックスアイテム(簡略化)

<div class="component imfr-pc-input">
    <label …">
        <input value="1,2" type="hidden" name="XXXXX">
    <span id="XXXXX">
        <label class="checkbox_item_label">
            <input value="1" type="checkbox" tabindex="0" name="item_XXXXX">
            <span>項目1</span
        </span></label>
        <label class="checkbox_item_label">
            <input value="2" type="checkbox" tabindex="0" name="item_XXXXX">
            <span>項目2</span>
        </label>
        ・・・
    </span>
    <input value="" type="hidden" name="escape_XXXXX">
</div>

おしまい。