Javascript - Checkbox nicht mehr klickbar

[kapfe89]

Hallo zusammen,

ich habe mehrere Checkboxen, die jeweil in ein div gepackt sind.
Jetzt will ich das man die Checkboxen nicht mehr nur über sich selbst aktiviert, sondern auch durch Klick auf das dazugehörige div.

Mit jQuery erledige ich das folgendermaßen:

    $(".category").click(function() {
        var check = $(this).children("input[type=checkbox]").attr('checked');
        $(this).children("input[type=checkbox]").attr('checked', !check);
    });

.category ist dabei die Klasse des divs, und die dazugehörige Checkbox wird aktiviert.

Klappt auch ganz gut, nur die Checkbox wird jetzt nicht mehr aktiviert, falls man ganz normal auf sie draufklickt.
Eine Aktivation ist nur noch über das div möglich.

Wieso ist das so?



Wäre super, wenn mir jemand helfen könnte.
Danke,
Martin

 

[rd4eva]

Das könntest du zum Beispiel über event.target umgehen.

$(".category").click(function(event) {
    if($(event.target).is('div')){
        var check = $(this).children("input[type=checkbox]").attr('checked');
        $(this).children("input[type=checkbox]").attr('checked', !check);
    }
});

 

[kapfe89]

cool, das klappt ...

Kannst du mir noch kurz erklären, wieso das so ist?

Danke!

 

[rd4eva]

Ich bin mir ehrlich gesagt nicht 100% sicher. Aber ich vermute mal das es auf Event-Bubbling zurück zu führen ist.
http://www.teialehrbuch.de/Kostenlose-Kurse/JavaScript/12842-Event-Bubbling.html