【pleasanter】分類項目のラジオボタンについてあれこれやってみた

１．はじめに

分類項目の選択肢はドロップダウンリスト、ラジオボタンとコントロール種別が選択できます。ラジオボタンは入力の際に選択肢がぱっと目に入るので、入力者には優しい機能かな、と思います。選択肢が２つ３つと少ないときには、便利ですね。

これまであんまり使ってこなかったのですが、たまーに使って、あるとき、$p.on で項目の値が変わったときに●●しよ~としたところ。。。ラジオボタンだと $p.on(‘change’, …）では値の変化をとらえられないのですね。
ちょっと特殊なのか、と。で、あれこれ試してみました。

２．そもそも ラジオボタン とは

そもそも、世間一般でいう「ラジオボタン」とは。で検索したら、AI先生がまとめてくれました。
グループの中で一つしか選べない、というのが大きな特徴ですね。

ラジオボタンは、複数の選択肢の中から1つだけを選ぶ際に使用するGUI（グラフィカルユーザーインターフェース）の入力要素です。アナログラジオの選局ボタンのように、1つを選択すると、以前に選択されていた項目は自動的に解除されるのが特徴です。これは、チェックボックス（複数選択が可能）と対比されます。 

主な特徴

• 択一性: グループ内で1つの項目しか選択できません。
• 由来: アナログカーラジオの選局ボタンから名付けられました。1つを押すと他が外れる仕組みが似ています。
• 表示: 一般的には丸い印で表示され、未選択時は空白、選択時は中央に黒丸が表示されます。
• 使い分け: アンケートや問い合わせフォームの「はい／いいえ」や、年齢層の選択など、1つを選んでほしい場面に適しています。
• その他: 選択肢が6つ以上ある場合や、画面スペースが限られている場合は、ドロップダウンメニューも検討されます。また、ユーザーが何も選ばない状態を許容する場合は、「無回答」などの選択肢を用意することが推奨されます。 

３．プリザンターの分類項目の「ラジオボタン」

公式マニュアル
テーブルの管理：エディタ：項目の詳細設定：コントロール種別(分類)

（１）設定の仕方

テーブルの管理＞エディタ タブで「分類項目」を選択し、[コントロール種別] で「ラジオボタン」を選択すると、分類項目がラジオボタン表示となります。

ドロップダウンにした場合と、ラジオボタンにした場合のイメージ
なお、マニュアルにあるように、ラジオボタンにしたときに、フィールドCSSに「radio-clear-both」とすると、縦に並びます。

（２）ラジオボタンの特徴

ドロップダウンリストの場合、三角ボタンを押さないと選択肢に何があるかがわかりません。
ラジオボタンの場合、選択項目が表示されており、ぱっと目に入るので、そこは利点だと思います。

ラジオボタンには、以下の特徴があります。

・ 回り込みしない、にしなくても問答無用で一番左に来る。
・ 「検索機能を使う」「複数選択」「選択肢にブランクを挿入しない」は使えない。
・ 一回選択すると、いずれも選択しない状態に戻すことはできない。
・ ルックアップや項目連携は使えない。

以下のオプションは普通に利用できました。
・ 読取専用
・ 入力必須
・ 一括更新を許可
・ 規定値の設定

３．ラジオボタンのスタイル

（１）縦に配置する

前項でも触れていますが、フィールドCSSに「radio-clear-both」とすると、縦に並びます。
アンケートやEラーニングなどでよく見かける形なので、結構好きです。

（２）幅を狭くする

ラジオボタンの分類Aのスタイルを開発者用ツールで見てみます。
widthが100%になってますね！横幅いっぱいとっているんですね。

エディタの設定で、フィールドCSSにstyle-narrowクラスを設定し、スタイルタブで以下のスタイルを設定します。
フィールドの幅を340pxにする、というものです。
出力先は「新規」「編集」としました。

.style-narrow {
  width: 340px;
}

下図のように、幅が狭くなり、次の項目が右に回り込んできました。簡単ですね！

（３）前の項目の右に回り込みさせる

ラジオボタンは必ず一番左に来るのですが、それを解除し、前の項目の右横に回り込みさせたい場合、どうしたらよいのか。
AI先生に聞いたところ、
float: left; によって左側に回り込ませようとしているのに、
clear: both; があることで “前の float 要素をすべてクリアして次の段に回り込む” という動きになっています。
解決方法：clear: both; を削除する（または clear: none; にする）

ということでしたので、clear: none を追加してみることにしました。

(2)の続きで、フィールドCSSに「style-narrow」が設定した状態で、スタイルに clear: none を追加します。

.style-narrow {
  width: 340px;
  clear: none;
}

下図のように、前の項目の右に来てくれました！

４．スクリプトやサーバースクリプトで値を取得、設定する

（１）サーバースクリプト 値の取得

ドロップダウンリストの時の同じようにやって、できました。

//値の取得
context.Log(model.ClassF);        //コンソールの表示例：100
//値の設定
model.ClassF= '300';

（２）スクリプト 値の取得

ドロップダウンリストの時と同じようにやって、できました。

//値の取得
console.log($p.getValue('ClassF')); 　　　　　     //コンソールの出力例：100　　
console.log($p.getControl('ClassF').val());        //コンソールの出力例：100
//値の設定
$p.set($p.getControl('ClassF'), '300');

（３）スクリプト 表示名の取得

なお、表示名を取得したいときはどうすれば。。。と、AI先生に聞いたところ、以下のコードを教えてもらいました。

// ClassF の選択された値を取得（例: 100）
const selectedValue = $p.getControl('ClassF').val();

// その値を持つラジオボタン要素を探す
const selectedRadio = $(`input[name="Results_ClassF"][value="${selectedValue}"]`);

// 対応するラベルのテキストを取得
const displayName = selectedRadio.closest('label').find('.radio-text').text();

console.log(displayName);                        //コンソールの表示例：良い

1行で書くバージョンも教えてくれました。

const name = $(`input[name="Results_ClassF"][value="${$p.getControl('ClassF').val()}"]`).closest('label').find('.radio-text').text();

詳しい解説はAI先生に聞いてみてください。
私がここで学んだのは、closest が上（親要素）を探しに行き、 find が下（子要素）を探しに行くんだ、ということです。

わからないときはAI先生に聞くべし！
HTMLを渡してあげたり、$p.getControlの解説のURLとか渡してあげたりすると、けっこう良い回答をくれます。
生成AIにプリザンターについて聞くときには、まず「プリザンターの公式マニュアルとQiitaのプリザンターの記事、全部読んで」と依頼してから、プリザンターについての質問をすると、けっこう的を得た回答をくれます。

５．スクリプトやサーバースクリプトで読取専用（編集不可）、非表示にする

（１）サーバースクリプト

サーバースクリプトのほうは簡単でした。
ユーザーIDが1以外の時に、ラジオボタンの分類Fを読取専用にする、というコードです。
タイミングは「画面表示の前」としました。

if ( context.UserId !== 1 ) {
  columns.ClassF.ReadOnly = true;
}

（２）スクリプト

以前 【pleasanter】項目を読取専用（編集不可）にする でちらりと触れましたが、分類項目のラジオボタンは readonly でも disable でも読み取り専用にできませんでした。

以下の書き方で読み取り専用（編集不可）にできます。

$('#Results_ClassFField .control-radio').prop('disabled', true);
//または
$p.getField('ClassF').find('.control-radio').prop('disabled', true);

値を保持する分類項目の要素自体はhiddenとなっており、分類項目を編集不可にしようとすると、hiddenの部分を編集不可にすることになるため、control-radio クラスのついた要素のほうを 編集不可にするように書きます。

６．値の変化をキャッチする方法

（１）サーバースクリプトの場合

エディタタブで監視したい項目（今回はラジオボタンの分類F）の自動ポストバックをオンにすると、項目値の変化により処理を実行させることができます。普通の項目と同じですね。

以下、分類Fのラジオボタンの選択を変えると、コンソールにメッセージを出す処理です。
タイミング「計算式の後」としました。

const value = model.ClassF;
context.Log(`ラジオボタン${value}選択`)      

ラジオボタンの選択値を変えると、コンソールにメッセージが出力されます。

（２）スクリプトの場合

スクリプトで項目の値が変わったら、ほにゃらら、としたいときは $p.on(‘change’,…)を使います。
開発者向け機能：スクリプト：$p.on

が！ラジオボタンにすると、これが効かないのですぅ。

AI先生とあーもない、こーでもない、渡したURLのマニュアル読んでこれ？コラァ、とか喧々諤々とやりあって、最終的に以下のコードでは反応しました。

$(document).on('change', 'input[name="Results_ClassF"]', function () {
    console.log('分類Fの値が変更されました。');
});
//または
$('input[name="Results_ClassF"]').on('change', function () {console.log('分類Fの値が変更されました。');})

（３）計算式拡張

値の変化を受けてほかの項目値を変える方法として、もっともお手軽なのは 計算式（拡張）がおすすめ！（ラジオボタンに限らずですが。）
(2)と同様に、エディタの設定で自動ポストバックをオンにしておくことで、選択を変えるとすぐに結果が反映されます。

計算式；数値Aに出力

$IFS([ClassF] == 100, 20, [ClassF] == 200, 50, [ClassF] == 300, 100, "true", 0)

計算式（拡張）：$IFS関数
計算式（拡張）の関数一覧

７．ルックアップ

ラジオボタンではルックアップはできないと書いてあったのですが、できました。

（１）ラジオボタンでのルックアップ

「マスタ試験テーブル」から「試験申込テーブル」へ値を持ってきています。
「試験申込テーブル」の分類A「試験名」をラジオボタンとしています。
その「試験名」の選択肢一覧に、通常のドロップダウンの時と同じように、以下のルックアップのJSONを入力しています。

[
    {
        "SiteId": 9053,
        "Lookups": [
            {
                "From": "DescriptionA",
                "To": "ClassB"
            },
            {
                "From": "DateA",
                "To": "DateA"
            },
            {
                "From": "ClassA",
                "To": "ClassC"
            }
       ]
     }
]

（２）計算式（拡張）でルックアップ

できるんだったら必要ないのですが、もしラジオボタンでルックアップができなかった場合、同じことを、計算式（拡張）を使ってやってみます。

ルックアップのマスタテーブルを用意します。

サイトID：9049 で以下の内容としています。

子テーブルのほうは以下の設定とします。

項目名	表示名	選択肢	種類	備考
分類A	試験名	[[9049]]	ラジオボタン	自動ポストバック
分類B	試験会場	東京会場,大阪会場,福岡会場	ドロップダウンリスト
分類D	分類D	※1：ルックアップ	ドロップダウンリスト	自動ポストバック

※１ルックアップ

[
    {
        "SiteId": 9049,
        "Lookups": [
            {
                "From": "ClassB",
                "To": "ClassB",
                "Type": 1
            }
        ]
     }
]

計算式を設定

分類Dに分類Aの値が入るように計算式（拡張）を設定します。

これでいけます！このやり方が正しいのかどうかはさておき、ですが。

分類Aの試験名を選択 ⇒ 分類Dに分類Aの値が入る ⇒ 分類Dのルックアップが発動 ⇒ 分類B試験会場に値が入る

（２）プリなまでやっていた方法～サーバースクリプト context.ResponseaSet を利用する～

ラジオボタンでルックアップを実装する方法として、プリなま(18回）でやっていた方法です。
予想外にラジオボタンで普通にルックアップができちゃったのですが、お勉強のため、やってみました。

context.ResponseSet を使います。
開発者向け機能：サーバスクリプト：context.ResponseSet

分類A（ラジオボタン）で「試験名」を選んだら、分類Bに「試験会場」を表示する、というルックアップ的なことをサーバースクリプトでやってみます。

■ エディタ

分類A、分類Bに選択肢を入力しておきます。
分類Aは種別を「ラジオボタン」とし、「自動ポストバック」をオンにします。

サーバースクリプトに以下のコードを入力します。タイミングは「計算式の前」としました。

const responseset = {
  "試験A": "A会場",
  "試験B": "B会場",
  "試験C": "C会場"
};

context.ResponseSet('ClassB', responseset[model.ClassA]);

context.ResponseSet(target, value) は target で指定した項目に 値 value をセットします。
開発者向け機能：サーバスクリプト：context.ResponseSet

responseset はオブジェクトです。
連想配列、というのでしょうか。
“key”:”Value”　と対で値をセットしておきます。
responseset(“key”)とすると、対になっている”value”を返します。
responseset(“試験A”) とすると、「A会場」を返します。

頑張って、２つやってみた。

const responseset = {
  "試験A": { venue: "A会場", level: "簡単" },
  "試験B": { venue: "B会場", level: "やや難しい" },
  "試験C": { venue: "C会場", level: "超難しい" }
};

// model.ClassA が未選択でなければ実行
if (model.ClassA) {
  const data = responseset[model.ClassA];
  if (data) { // 該当データがあるときのみ
    //項目に値をセット
    context.ResponseSet('ClassB', data.venue);
    context.ResponseSet('ClassC', data.level);
  }
}

こんな感じ

８．ラジオボタンの項目連携（ColumnFilterExpressions）

ラジオボタンでの項目連携はできない、とマニュアルに書いてあり、やってみたところ、本当にできなさそう。

ラジオボタンで選択 ⇒ 別の項目に連動させる(プロセス等利用） ⇒ その項目を起点に項目連携、は、できましたが、「作成」「更新」ボタンを押す必要がありました。あれこれ悩まず、項目連携したいなら、ラジオボタンやめれ、という話ですね。

ColumnFilterExpressionsを使用した項目連携（というのかな？）はできました。
テーブルの管理：エディタ：項目の詳細設定：選択肢一覧：フィルタ、ソート、表示フォーマット

手前味噌ですが、ColumnFilterExpressions については、こちらもどうぞ
【pleasanter】リンクとルックアップ⑤ColumnFilterExpressions～動的な選択肢の絞り込み～

（１）ラジオボタンの項目を起点に ColumnFilterExpressions で選択肢を絞り込み表示させる例

「試験マスタテーブル」を参照し、「試験申込テーブル」で試験会場を選択すると、受験可能な試験名を絞り込み表示させている例です。
「試験会場」をラジオボタンとしています。
さすがに別項目によって変化する「試験名」をラジオボタンにするのは、できませんでした。

選択肢一覧のJSON

[
    {
        "SiteId": 9053,
        "View": {
            "ColumnFilterExpressions" : {
                "ClassB":"[ClassB]"
            }
        }
    }
]

９.最後に

長くなってしまいました。あまり使っていなかったラジオボタンですが、アンケートなどで利用するとけっこう美しいモノができる☆彡ので、ちょいちょい利用するようになりました。
縦に配置するとコンパクトになり、個人的には結構好きです。

お読みいただきありがとうございました！

１０.参考文献、記事

プリザンター公式
テーブルの管理：エディタ：項目の詳細設定：コントロール種別(分類)
プリザンターのお悩みを動画で解説（ぷりなま）

開発者向け機能：サーバスクリプト：context.ResponseSet
応用編：項目の種類
開発者向け機能：スクリプト：$p.on
計算式（拡張）の関数一覧
計算式（拡張）：$IFS関数
テーブルの管理：エディタ：項目の詳細設定：選択肢一覧：フィルタ、ソート、表示フォーマット

参考とさせていただいた記事
【プリザンター】 第283回）サーバスクリプトで選択肢の表示名を取得できるか？

内部リンク
【pleasanter】項目を読取専用（編集不可）にする
【pleasanter】リンクとルックアップ⑤ColumnFilterExpressions～動的な選択肢の絞り込み～
【pleasanter】入力欄を広くしたり狭くしたりする～構造を理解したらいろいろうまくいった～

もう読みました？プリザンターの概要、インストール方法から基本操作方法、導入事例、サンプル等役に立つ情報が満載！

こちらは2025年11月28日発売！