See https://jetsloth.com/gravity-forms/how-to-build-a-product-configurator-with-gravity-forms-and-image-choices/

image_choices_basic_product_configurator.html

<script type="text/javascript">
(function($){
	$(document).bind('gform_post_render', function(e, formId, currentFormPage) {

		var formSelector = '#gform_' + formId;
		var $form = $(formSelector);

		if ( $form.data('configurator-init') !== true ) {
			// Add the preview layers
			$(formSelector + ' .gform_body .gfield.image-choices-field.config-layer').each(function(i, el){

				var $field = $(this);
				if ( !$field.find('.ginput_container_radio').length && !$field.find('.ginput_container_checkbox').length  ) {
					return true;
				}

				var layerNum = i+1;
				var layerRef = 'preview-layer-' + layerNum;

				var fieldID = $field.attr('id');

				var $previewArea = $field.closest('form').find('.gform_body div.preview-area');
				$previewArea.append('<div class="preview-layer '+layerRef+' '+fieldID+'" style="z-index:'+layerNum+';"></div>');

				$field.data('layerRef', layerRef);

			});

			// update preview on choice click
			$(document).on('change', formSelector + ' .config-layer.image-choices-field .ginput_container input', function (e) {

				var $input = $(this);
				var inputType = $input.attr('type');
				var validInputType = ( inputType === "checkbox" || inputType === "radio" );

				var inputID = $input.attr('id');
				var $thisForm = $input.closest('form');
				var $label = $input.next('label');
				var $choice = $label.closest('.image-choices-choice');
				var $field = $choice.closest('.gfield');
				var $previewArea = $thisForm.find('.gform_body div.preview-area');

				var layerRef = $field.data('layerRef');
				var $layer = $previewArea.find('.'+layerRef);

				if ( validInputType && !$input.is(':checked') && $layer.find('.preview-item.' + inputID).length ) {
					$layer.find('.preview-item.' + inputID).remove();
				}
				else if ( validInputType && !$layer.find('.preview-item.' + inputID).length ) {
					// if this choice is a config-reset, it clears all other layers when changed
					if ( $field.hasClass('config-reset') ) {
						$previewArea.find('.preview-item:not(.' + inputID + ')').remove();
					}
					// put selected image into the preview
					var $img = $choice.find('span.image-choices-choice-image-wrap img:first').clone();
					$img.attr('class', 'preview-item ' + inputID);
					// handle src if lazy loading is on
					if ( $img.data('src') ) {
						$img.attr('src', $img.data('src') )
					}
					else if ( $img.data('lazy-src') ) {
						$img.attr('src', $img.data('lazy-src') )
					}

					if ( inputType === 'radio' ) {
						$layer.empty();
					}
					$layer.append($img);
				}

			});

			$form.data('configurator-init', true);

		}

		setTimeout(function(){
			// start by triggering click on everything selected by default, getting them into the preview
			$('.gfield.image-choices-field.config-layer:not([style*="display: none"]):not([style*="display:none"]) .ginput_container_radio input:checked, .gfield.image-choices-field.config-layer:not([style*="display: none"]):not([style*="display:none"]) .ginput_container_checkbox input:checked').each(function(i, el){
				console.log(this);
				$(this).trigger('change');
			});
		}, 100);

	});

	if ( window.gform && window.gform.addAction ) {
		// trigger click on any choices with default values, after conditional logic changes
		window.gform.addAction('gform_post_conditional_logic_field_action', function (formId, action, targetId, defaultValues, isInit) {
			if ( !isInit ) {
				var $input = $(targetId);
				var $field = $input.closest('.gfield');
				if ( defaultValues && $field.is(':visible') && $field.hasClass('config-layer') ) {
					$.each(defaultValues, function(i, inputID){
						$('#'+inputID).trigger('change');
					});
				}
			}
		});
	}


})(jQuery);
</script>