Check input[type=checkbox] in jQuery event handler

Question

I've got the following HTML:

<ul id=list>
    <li>
        <input type=checkbox />
        Item 1
    </li>
    <li>
        <input type=checkbox />
        Item 2
    </li>
    <li>
        <input type=checkbox />
        Item 3
    </li>
</ul>

And corresponding JavaScript:

$('ul').bind('click', function(e) {

    if (e.srcElement.tagName.toLowerCase() === 'input') {
        e.srcElement.checked = true;
    }

    return false;
});
    
$('body').bind('click', function() {

    alert('you should see this alert if and only if you did NOT click the list');

})

When I click a checkbox, it does not get checked. I want it to be checked when the user clicks it.

How do I make it so the checkbox is checked when the user clicks it, but still cancel the body click event handler?

I've put up a JS fiddle as well.

Edit: I understand the code is a bit clunky, but it needs to be structured this way for the application, so solutions should stay as close to the original as possible. That being said, explanations of the observed behavior would be appreciated.

Felix Kling · Accepted Answer · 2011-10-20 21:56:19Z

3

Use e.stopPropagation() ^[docs] instead of return false. The latter also prevents the default action from happening, which is toggling the state of the checkbox.

You should also consider to bind the event handler to the change event instead of click, the mouse it not the only way to toggle a checkbox. You'd still need to add an additional handler to prevent the click event from bubbling up though.

edited Oct 20, 2011 at 21:56

answered Oct 20, 2011 at 21:50

Felix Kling

820k181 gold badges1.1k silver badges1.2k bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

pimvdb Over a year ago

Interesting; on Chrome it's not possible to uncheck that way. jsfiddle.net/pimvdb/ChwAv/4

Felix Kling Over a year ago

@pimvdb: That's not because of Chrome... look closer at the event handler's code ;)

Birey Over a year ago

I noticed e.stopPropagatoion() should be the first line in the event function call, any idea why?

Felix Kling Over a year ago

@Bipins: It should not matter... what problem did you find?

Birey Over a year ago

this jsfiddle.net/RnyeP bubbles events when that line is at the end of the function , whereas this does not jsfiddle.net/adKPj when that line is the first line.

|

aziz punjani · Accepted Answer · 2011-10-20 22:11:38Z

2

I think this is what you want ?

$('ul').bind('click', function(e) {          
    e.stopPropagation();       
});

$('body').bind('click', function() {
    alert('you only see this alert if and only if you did NOT click the list');
})

edited Oct 20, 2011 at 22:11

answered Oct 20, 2011 at 22:05

aziz punjani

25.8k9 gold badges49 silver badges56 bronze badges

2 Comments

Birey Over a year ago

I guess that would be e.stopPropagation .... the even variable of that event handler.

aziz punjani Over a year ago

Actually weirdly i corrected it at almost the same time you left that comment.

Birey · Accepted Answer · 2011-10-20 22:27:56Z

2

You are binding click to "ul" , you should be binding it to "ul> input"

to avoid getting click bubbled you need to cancel bubble using event.stopPropagation() I noticed stopPropagation() should be the first thing in the function.

$('ul').bind('click', function(e){
    e.stopPropagation();
    if (e.target.tagName.toLowerCase() === 'input') {
       e.target.checked = true;
    }
});

$('body').bind('click', function() {

    alert('you should see this alert if and only if you did NOT click the list');
 });

edited Oct 20, 2011 at 22:27

answered Oct 20, 2011 at 21:52

Birey

1,81216 silver badges20 bronze badges

5 Comments

aaronstacy Over a year ago

i appreciate the feedback, but in the context of my application i need to be binding to 'ul', not 'li'. i have of course simplified it for the sake of the SO question.

aaronstacy Over a year ago

i want to bind one event to the 'ul' element, and one to the 'body' element. i do not want to bind to the 'li' element or the 'input' element. there is a reason, but there is not space to get into it.

Birey Over a year ago

Ya sure, you can bind to ul element only too, if that is what u want. :)

aziz punjani Over a year ago

Aaron, is what i have proposed above not the behavior you want ?

Birey Over a year ago

you can use e.target instead, srcElement and target are same depending on browser, jquery says that it normalizes both to "target" for cross browser compatibility.

Collectives™ on Stack Overflow

Check input[type=checkbox] in jQuery event handler

3 Answers 3

8 Comments

2 Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

8 Comments

2 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related