Question

I have a php script that outputs images, at the moment to select an image you have to click a checkbox. I want to change this so that when the parent div is clicked the checkbox is set to checked.

I know how to do this if i have a different id for the parent div, and the class seems to be no good as it would set all of the checkboxs the php has outputted as true/false.

this is what i have so far:

JQuery

$('#div').bind('click', function() {
   var checkbox = $(this).find(':checkbox');

    checkbox.attr('checked', !checkbox.attr('checked'));
});

HTML (Outputted by php, so multiples exist.)

<div id="div" style='display:inline-block; padding:15px;' class='lifted drop-shadow-sq'>
    <img class='reflect reflect-br'  width='150px' height='150px' src=\"thumb.php?id=$id\">
        <input type='checkbox' class=\"show-man\" name=\"images[]\" value='$id'>
</div>

So how would i set the checkbox as checked when the parent div is clicked in a way that wouldn’t cause conflict between any other checkbox?

thanks for any help in advance.

Answer 1

Your selector is wrong there is no element with ID of div in your markup, you can use prop method:

$('div').on('click', function() {
   $('input[type=checkbox]', this).prop('checked', function(i, checked){
      return !checked
   })
});

Please note that :checkbox selector is deprecated and IDs must be unique, if you have multiple elements with the same IDs your markup is invalid and your ID selector only selects the first element with that specific ID, you should use classes instead.

$('.div').on('click', function() {