JQuery Click Child when Parent Clicked

Question

I am having a long day....

I have this code below

<div class="background" onclick="javascript:$('this checkbox').click();">
    <div class="picture"> 
       <img class="colors" src="458x395.png" />
    </div>
    <input type="checkbox" value="nothing" name="check" class="selsts" />
</div>
<div class="background" onclick="javascript:$('this checkbox').click();">
    <div class="picture"> 
       <img class="colors" src="asdfag3.png" />
    </div>
    <input type="checkbox" value="aff4t" name="check" class="selsts" />
</div>

And its supposed to click the checkbox. I can't distinguish by name, class or id, I have to use the type. I also need to make sure its within the parent div and nothing else.

Any idea why this isn't working? I'm sure i'm just having a stupid moment. :\\

Thanks

Answer 1

HTML

<div class="background">
    <div class="picture"> 
       <img class="colors" src="458x395.png" />
    </div>
    <input type="checkbox" value="nothing" name="check" class="selsts" />
</div>

Javascript

$('div.background').click(function() { 
  var checkBox = $(this).find('input:checkbox'); 
   checkBox.attr('checked', !checkBox.attr('checked'));
});

Answer 2

As you're using jQuery, you should probably not be using the onclick attribute to bind your event handler.

The main problem is that your passing a string to jQuery. That string is interpreted as a selector, and will look for an element of type checkbox that's a descendant of an element of type this . Obviously, that's not going to exist.

You want something more like this:

$("div.background").click(function() {
    $(this).find(":checkbox").click();
});

Or, you can pass this to jQuery as a context (which is equivalent to using find ):

$("div.background").click(function() {
    $(":checkbox", this).click();
});

Note that I'm using :checkbox instead of just checkbox (with the : ). That's a selector that matches input elements of type checkbox .

However, there is likely to be a big problem with this. You're going to get stuck in an infinite loop (since DOM events bubble up the tree). You will need to capture the click event on the checkbox and stop the propagation of it there.

Answer 3

Your jQuery is looking for a this tag, which doesn't exist. You shouldn't inline your JS. And .click() doesn't check the DOM when you add new elements, so try this:

<div class="background">
    <div class="picture"> 
        <img class="colors" src="458x395.png" />
    </div>
    <input type="checkbox" value="nothing" name="check" class="selsts" />
</div>​

then to get it to actually check the checkbox use (this is jQuery 1.7):

$(".background").on("click",function(e) {
    var chk = $(this).find('input[type=checkbox]')[0];
    chk.checked = !chk.checked;
});​

this solution doesn't run into the DOM bubbling issue James describes

Answer 4

Your passing this in as a string, not as an object. Jquery will not understand the scope of this. Consider attaching the function outside of the html to separate concerns

Try this it will allow the user to check/uncheck and will not propagate the event creating a loop.

<div class="background">
    <div class="picture">
       <img class="colors" src="458x395.png" />
    </div>
    <input type="checkbox" value="nothing" name="check" class="selsts" />
</div>

Javascript

 $(document).ready(function(){
    $(".background").click(function(e){
        var chk = $($(this).find("input[type='checkbox']"));
        if(chk.attr('checked'))
        {
            chk.attr('checked',false);
        }else{
            chk.attr('checked',true);
        }

       });
    });

Example: http://jsfiddle.net/fycFB/

Answer 5

onclick="$(this).find(':checkbox').attr('checked','checked')"

Answer 6

Do you need like this ?

 $("input[type=checkbox]").click(function(){ alert('Checked');});​

http://jsfiddle.net/JF2xu/1/

Answer 7

<div class="background" style="border:1px solid black;" onclick="javascript:$(this).find(':checkbox').attr('checked',true);"> 
                    <div class="picture"> 
                    <img class="colors" src="458x395.png" />
                    </div>
                <input type="checkbox" value="nothing" name="check" class="selsts" />
            </div>