Jquery Click Child When Parent Clicked

Question

I am having a long day.... I have this code below

Solution 1:

HTML

<divclass="background"><divclass="picture"><imgclass="colors"src="458x395.png" /></div><inputtype="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'));
});

Solution 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.

Solution 3:

Do you need like this ?

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

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

Solution 4:

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

Solution 5:

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

Html5 Academy