Need help with a checkbox

This works fine, except the var total = 0; doesn't show unless you click the checkbox twice. How can I show that 0 right away when the checkbox is first loaded?

https://jsfiddle.net/zf1psgw6/1/

<input type="checkbox" value="1" id="add_one" >
<div id="total"> </div>

Code (markup):

$("#add_one").click(function () {
var chk = $("#add_one").val();
var total = 0;
if ($("#add_one").prop("checked") == true) {
var gtotal = parseInt(total) + parseInt(chk);
} else {
var gtotal = parseInt(total);
}
$('#total').text(gtotal);
});

Code (markup):

 

D'oh!!

https://jsfiddle.net/zf1psgw6/5/

All I had to do is put a 0 in <div id="total">0</div>