javascript onClick on image should activate checkbox WordPress

• SOLVED

I use the following code on mapsmarker.com plugin to show marker icons on admin backend:

<?php
foreach ($iconlist as $row)
echo '<div><img value="'.$row.'" id="iconpreview" src="' . LEAFLET_PLUGIN_ICONS_URL . '/' . $row . '" /><br/><input onchange="updateicon(this.value);" type="radio" name="icon" value="'.$row.'"'.($row == $icon ? ' checked' : '').'></div>';
?>

The code for updateicon() looks like this:

function updateicon(newicon) {
if(newicon) {
marker.setIcon(new L.Icon('<?php echo LEAFLET_PLUGIN_ICONS_URL . '/' ?>' + newicon));
}
if(!newicon) {
marker.setIcon(new L.Icon('<?php echo LEAFLET_PLUGIN_URL . 'leaflet-dist/images/marker.png' ?>'));
}
}

To improve usability, I want the user to be able to select the icon by clicking on the image too. So I started adding the javascript function <strong>onClick="updatecheckedicon(this.value);"</strong> to the image-tag:

<?php
foreach ($iconlist as $row)
echo '<div><img onClick="updatecheckedicon(this.value);" value="'.$row.'" id="iconpreview" src="' . LEAFLET_PLUGIN_ICONS_URL . '/' . $row . '" /><br/><input onchange="updateicon(this.value);" type="radio" name="icon" value="'.$row.'"'.($row == $icon ? ' checked' : '').'></div>';
?>

Unfortunately, I didnt get this function to work. If the user clicks on the image, the according checkbox should be checked.

Does anyone know how this function must look like?

Answers (2)

2012-08-05

Francisco Javier Carazo Gil answers:

You can do it using jQuery.

Firstly you have to add classes or identifiers to relate each one. For example:
* img class = clickable
* img add an attribute mycheck = id_checkbox
* checkbox id = id_checkbox

You will have related img and checkbox with the the new attribute and then you can make a listener with your class.

You can add after the loop this one:


$(".clickable").click(function () {
$("#" + this.attr("mycheck")).prop("checked", true);
});


---

Francisco Javier Carazo Gil comments:

Modify the loop to get the news classes and identifiers:

<?php
$i = 0; // to have a valid identifier
foreach ($iconlist as $row)
{
$i++;
echo '<div><img class="clickable" mycheck="check' + $i + '" value="'.$row.'" id="iconpreview" src="' . LEAFLET_PLUGIN_ICONS_URL . '/' . $row . '" /><br/><input id="check' + $i + '" onchange="updateicon(this.value);" type="radio" name="icon" value="'.$row.'"'.($row == $icon ? ' checked' : '').'>
}</div>';

?>


2012-08-06

Gabriel Reguly answers:

Hi Robert,

Why not use <label> html tag?


<?php

foreach ( $iconlist as $row ) {
echo '
<div>
<label "iconpreview_"'.$row.'">
<img value="'.$row.'" id="iconpreview_"'.$row.'" src="' . LEAFLET_PLUGIN_ICONS_URL . '/' . $row . '" /><br/>
<input onchange="updateicon(this.value);" type="radio" name="icon" value="'.$row.'"'.($row == $icon ? ' checked' : '').'>
</label>
</div>';
}
?>


IMO that would be the best approach.

Regards,
Gabriel

---

Robert Seyfriedsberger comments:

that was the right approach thanks!

for the record - if anyone tries to copy the code above - it had some errors - here is the right one:

<?php
foreach ( $iconlist as $row ) {
echo '
<div>
<label for="iconpreview_'.$row.'">
<img value="'.$row.'" src="' . LEAFLET_PLUGIN_ICONS_URL . '/' . $row . '" /> </label>
<br/>
<input id="iconpreview_'.$row.'" onchange="updateicon(this.value);" type="radio" name="icon" value="'.$row.'"'.($row == $icon ? ' checked' : '').'>
</div>';
}
?>