snow monkey formsのラジオボタン選択時に画像を表示／切り替えたい

＞キタジマさん

ご返信ありがとうございます。

まさにそんな感じです！

たとえば資料請求やサンプル請求のフォームで、A、B、C、Dといった4つの選択肢があって、選択するとそれぞれのイメージが表示されるようにしたい（他のイメージは非選択時は隠しておきたい）といった感じです。

自分なりに調べてもみたのですが、jQueryと連携させてチェック時の条件分岐をする（？）といった方法でできる？ようなところまでは行き着いたのですが、実際に試してみても全くうまくいかず、完全にお手上げ状態でした。。。

アドバイスいただけると大変有難いです…！

何卒よろしくお願いいたします。

＞キタジマさん

ご返信いただきありがとうございます！

僕も特にそういうのをつくった経験はないので、試したコードがあるのであればそれを共有してください！（それをもとにやったほうが簡単かなと思うので）

こちらかしこまりました。

ただ私自身がJavaScriptやjQueryの知識に乏しくほとんど何もわからない素人なので、色々検索しつつChatGPTと問答しながら試してみたという状況なのですが…ChatGPTも最初にsnow monkey formsのコードを読み込ませてそれを前提にしているはずが途中でコードを無視したりと、結局うまくいかずじまいでした。。。

ですので参考になるかはわかりませんが、一応、最終的に提示されたコードを共有させていただきます。

・snow monkey formsのコード

add_filter(
	'snow_monkey_forms/checkboxes/options',
	function( $options, $name, $setting ) {
		if ( 'checkboxes-xxxxx' === $name ) {
			return array(
				'option-1' => 'あいうえお',
				'option-2' => 'かきくけこ',
				'option-3' => 'さしすせそ',
			);
		}
		return $options;
	},
	10,
	3
);

・JavaScript

jQuery(document).ready(function($) {
	// チェックボックスの選択状態が変わるたびに実行
	$('[name="checkboxes-xxxxx[]"]').change(function() {
		// すべての関連画像を非表示にする
		$('.image-for-checkbox').hide();

		// 選択されているチェックボックスに応じて画像を表示
		$('[name="checkboxes-xxxxx[]"]:checked').each(function() {
			var selectedValue = $(this).val();
			// 対応する画像のIDに基づいて画像を表示（例: #image-for-option-1）
			$('#image-for-' + selectedValue).show();
		});
	});
});

・画像表示（HTML）

<img id="image-for-option-1" src="画像のURL" style="display:none;" alt="説明">

・画像表示（PHP）

<img id="image-for-option-1" src="<?php echo get_template_directory_uri(); ?>/path/to/image.jpg" style="display:none;" alt="説明">

以上になります。
お手数ですがお手すきの際にご確認いただけますと幸いです。

＞キタジマさん

返信いただきありがとうございます！

またコードのアドバイスありがとうござます。

特に動的に何かをしているようには見えなかったので、動的に項目の増減等が不要なのであればフォームの作成画面で設定してしまうのが簡単だと思います。

なるほど、アップデート情報のサンプルコードを元に選択肢を上書きした感じだったのですが、これ自体は必須ではなくフォームのほうでラジオボタンを設定するだけで問題ない感じなんですね。

入力画面については、頂いたコードをベースに↑の修正を入れて調整すれば実現できるそうでしたが、そこから管理画面にいって入力画面に戻ったり、バリデーションエラーがあってエラー画面になったりしたときにも選択肢に応じて正しく画像を表示させるのが、どうやったら良いのだろう…という感じでした。

やはり簡単にはいかなそうですね…

キタジマさんで良い方法が思いつかないのであれば到底今の私には実現できないと思いますので…ちょっと今々の実装は一旦諦めることとします。。。

選択肢に応じて画像を出さなくても、注釈的にポップアップを添えておくくらいでも同じ目的は果たせそうですので、代替手段で対応してみます。

お忙しい中アドバイスいただきありがとうございました！