Cant check checkbox on clicking li

I'm trying to check a checkbox by clicking a li. The problem is, the checkbox is only checked when someone clicks on the label, not the full li (this is because the width of the li is longer than the label!

<ul>
<li><input id="a1" type="checkbox"><label for="a1">1</label></li>
<li><input id="a2" type="checkbox"><label for="a2">2</label></li>
<li><input id="a3" type="checkbox"><label for="a3">3</label></li>
</ul>

I have tried to solve this problem using the Javascript below, however it still only checks the checkbox when the label is clicked.

<script>
$("li").click(function(e) {
  var checked = !$(this).children("input").first().prop("checked");
  $(this).children("input").first().prop("checked", checked);
  $(this).toggleClass("selected", checked);
});
</script>

Note: if possible, I would like to avoid Javascript and Jquery.