CODEWITHSUNDEEP
javascriptjqueryhtml
Alex Kelly
Alex Kelly

Reputation: 1603

JQuery Click Child when Parent Clicked

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

Upvotes: 0

Views: 2152

Answers (7)

JKirchartz
JKirchartz

Reputation: 18042

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

Upvotes: 0

Kevin Bowersox
Kevin Bowersox

Reputation: 94499

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/

Upvotes: 0

James Allardice
James Allardice

Reputation: 166041

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.

Upvotes: 1

okcoker
okcoker

Reputation: 1349

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

Upvotes: 0

Eugene
Eugene

Reputation: 143

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

Upvotes: 0

dotoree
dotoree

Reputation: 2993

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'));
});

Upvotes: 2

Praveen Vijayan
Praveen Vijayan

Reputation: 6761

Do you need like this ?

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

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

Upvotes: 0

Related Questions