html - How to make the entire area of a div clickable while excluding the checkbox that's on top of that area? -

i have div checkbox inside div:

<div class="study-box set-box">     <span class="set-box-title"><i class="icon-th-list icon-white"></i>test set</span>     <input class="study-box-checkbox" type="checkbox" /> </div> 

i want entire div clickable, can perform onclick() event. don't want event called when checkbox clicked, though. i'm thinking adding areas left , bottom of checkbox , binding event areas, seems hackish. thoughts?

jsfiddle sample box/checkbox:

http://jsfiddle.net/ptskr/59/

stop event propagation when input clicked.

$(".study-box").on("click", function () {     console.log("clicked"); }); $("input").on("click", function (e) {     e.stoppropagation(); }); 

http://jsfiddle.net/ptskr/60/