jquery - Javascript: Clicking a wrapper element but not a child element - Stack Overflow

admin管理员组

文章数量:1341464

I am writing some javascript (jQuery) that enables a div wrapped around a checkbox, when clicked, will toggle the checkbox element. However, the problem I'm running into is that when you click on the checkbox, it doesn't work because it's being toggled twice (at least I think that's what's happening).

Here's a demo.

Here's the code:

$('.checkbox-wrapper').click(function(){
    var $checkbox = $(this).find('input[type="checkbox"]');
    if ($checkbox.is(':checked')) {
        $checkbox.attr('checked', false);
    } else {
        $checkbox.attr('checked', true);
    }
});

How can I make it so that clicking the checkbox works as normal, but if you click in the surrounding area, it toggles the checkbox?

Solution:

Thanks to jAndy's ment for showing how this can be done by checking the event.target property:

$('.checkbox-wrapper').click(function(e){
    if( e.target.nodeName === 'INPUT' ) {
        e.stopPropagation();
        return;
    }
    
    var $checkbox = $(this).find('input[type="checkbox"]');
    if ($checkbox.is(':checked')) {
        $checkbox.attr('checked', false);
    } else {
        $checkbox.attr('checked', true);
    }
});

And as others have pointed out, this may not be the best example since you get the same functionality (without needing javascript) by wrapping the checkbox with a label tag instead of a div tag. Demo

I am writing some javascript (jQuery) that enables a div wrapped around a checkbox, when clicked, will toggle the checkbox element. However, the problem I'm running into is that when you click on the checkbox, it doesn't work because it's being toggled twice (at least I think that's what's happening).

Here's a demo.

Here's the code:

$('.checkbox-wrapper').click(function(){
    var $checkbox = $(this).find('input[type="checkbox"]');
    if ($checkbox.is(':checked')) {
        $checkbox.attr('checked', false);
    } else {
        $checkbox.attr('checked', true);
    }
});

How can I make it so that clicking the checkbox works as normal, but if you click in the surrounding area, it toggles the checkbox?

Solution:

Thanks to jAndy's ment for showing how this can be done by checking the event.target property:

$('.checkbox-wrapper').click(function(e){
    if( e.target.nodeName === 'INPUT' ) {
        e.stopPropagation();
        return;
    }
    
    var $checkbox = $(this).find('input[type="checkbox"]');
    if ($checkbox.is(':checked')) {
        $checkbox.attr('checked', false);
    } else {
        $checkbox.attr('checked', true);
    }
});

And as others have pointed out, this may not be the best example since you get the same functionality (without needing javascript) by wrapping the checkbox with a label tag instead of a div tag. Demo

• javascript
• jquery

Share Follow edited Jun 20, 2020 at 9:12 CommunityBot 111 silver badge asked Aug 3, 2011 at 17:32 AndrewAndrew 239k195195 gold badges531531 silver badges718718 bronze badges 0

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 5

Check the event.target property.

The target property can be the element that registered for the event or a descendant of it. It is often useful to pare event.target to this in order to determine if the event is being handled due to event bubbling.

Try this

$('.checkbox-wrapper').click(function(e){
   if(!$(e.target).is(":checkbox")){
     var $checkbox = $(this).find('input[type="checkbox"]');
     if ($checkbox.is(':checked')) {
         $checkbox.attr('checked', false);
     } else {
         $checkbox.attr('checked', true);
     }
   }
});

Try just wrapping a <label> around it.

it sounds like you've not stopped the event bubbling up to the parent elements

How to stop event bubbling on checkbox click

本文标签： jqueryJavascript Clicking a wrapper element but not a child elementStack Overflow