adding JS into existing PHP code?

[totallytech]

Hey All,

I need to change the way some of my radio buttons display.

 

I've set up a demo here which should show you what I'm trying to do, however I cannot work out how to merge the codes....

$s .= '<div class="app_services_dropdown_select">';
		//$s .= '<select name="app_select_services" class="app_select_services">';
		if ( $services ) {
			foreach ( $services as $service ) {
				$service_description = '';
				// Check if this is the first service, so it would be displayed by default
				if ( $service->ID == $appointments->service ) {
					$d = '';
					$sel = ' checked="checked"';
				}
				else {
					$d = ' style="display:none"';
					$sel = '';
				}
				// Add options
				//$s .= '<option value="'.$service->ID.'"'.$sel.'>'. stripslashes( $service->name ) . '</option>';
				$s .= '<input type="radio" name="app_select_services" value="'.$service->ID.'"'.$sel.' />'. stripslashes( $service->name ).'<br />';
				
				// Include excerpts
				$e .= '<div '.$d.' class="app_service_excerpt" id="app_service_excerpt_'.$service->ID.'" >';
				// Let addons modify service page
				$page = apply_filters( 'app_service_page', $service->page, $service->ID );
				switch ( $description ) {
					case 'none'		:		break;
					case 'excerpt'	:		$service_description .= $appointments->get_excerpt( $page, $thumb_size, $thumb_class, $service->ID ); break;
					case 'content'	:		$service_description .= $appointments->get_content( $page, $thumb_size, $thumb_class, $service->ID ); break;
					default			:		$service_description .= $appointments->get_excerpt( $page, $thumb_size, $thumb_class, $service->ID ); break;
				}
				$e .= apply_filters('app-services-service_description', $service_description, $service, $description) . '</div>';
			}
		}
		//$s .= '</select>';
		$s .= '<input type="button" class="app_services_button" value="'.$show.'">';
		$s .= '</div>';

Obviously the actual display code for the radio buttons is:

$s .= '<input type="radio" name="app_select_services" value="'.$service->ID.'"'.$sel.' />'. stripslashes( $service->name ).'<br />';

and the display code is:

<img class="hidden" id="car" src="http://site.co.uk/wp-content/uploads/2015/04/car.png" />
<img class="hidden" id="van" src="http://site.co.uk/wp-content/uploads/2015/04/van.png" />
<div id="imageSelectList"></div>

The car is value 1 on the radio and the van is 2...

 

The JS for the above is

function createImageSelectList(id, name, arrOptions) {
    var $elm = $("#" + id);
    for(var x = 0; x<arrOptions.length; x++) {
        var opt = arrOptions[x];
        var subId = name + "_" + opt.value;
        var $rad = $("<input />");
        $rad.attr("type", "radio");
        $rad.attr("value", opt.value);
        $rad.attr("name", name);
        $rad.attr("id", subId);
        var $lbl = $("<label />");
        $lbl.attr("for", subId);
        $lbl.append($("<img />")
            .attr("src", $("#" + opt.image).attr("src")));
        $elm.append($lbl);
        $elm.append($rad);
        
        $rad.change(function(){
            alert('radio  ' +this.value +' was checked')
        })
    }
}
createImageSelectList("imageSelectList", "pickImage1", [
    {value: 1, image: "car"},
    {value: 2, image: "van"}
    ]);

How can I merge the two?

[joel24]

your jsfiddle works fine though the css has the following declaration which is hiding the radio button.

[type=radio]{display:none}

if you change that to 

[type=radio]{display:block;}

 and then wrap each image and the associated radio button in a div and float to the left you can group them and play with the css.

[Muddy_Funster]

joel24 is right, there's nothing really wrong with the fiddle, except that your append for the image was a little flakey.  I've updated the fiddle with a cleaner append() to show images from a clipart site and changed the display:none to display:inline-block what else are you trying to do