Unable to successful detect click or change events on a checkbox

Problem: Unable to successful detect click or change events on a checkbox.

Intent: The overall intent is to detect a change or click on a checkbox and then use jquery’s show and hide methods to display / hide elements.

My approaches so far include the following:

Method 1: Onclick Handler

HTML

<div class="col-md-1"><center>
    <label><p>Recurring</p>
    <input type="checkbox" onclick="toggleRecur()"></input></label></center>
</div>

JAVASCRIPT

function toggleRecur(){
console.log("something clicked"); }

Method 2: jquery EventListener HTML

<div class="col-md-1"><center>
     <label><p>Recurring</p>
     <input type="checkbox" id="task_recur" ></input></label></center>
  </div>

Javascript/jquery

$(document).on("checked","#task_recur",function(){         
        alert("something checked");
});

Method 3: jquery Listener 2

$('input[id=task_recur]').change(function(){

if($(this).is(':checked'))
    alert("czech it");

});

Unfortunately, none of the above worked, whether inside or out of the document load. I'm currently running under chrome. Any help would be so appreciated!