无法成功检测复选框上的单击或更改事件

Question

问题:无法成功检测复选框上的点击或更改事件。

意图:总体意图是检测更改或单击复选框，然后使用jquery的show和hide方法来显示/隐藏元素。

到目前为止，我的方法包括:

方法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"); }

方法2:jquery EventListenerHTML

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

jquery Javascript/

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

方法3:jquery Listener 2

$('input[id=task_recur]').change(function(){
if($(this).is(':checked'))
    alert("czech it");
});

不幸的是，无论在文档加载内部还是外部，上述方法都不起作用。我目前在chrome下运行。任何帮助都会非常感激!

Answer 1

第一选择

function toggleRecur(){
alert("something clicked"); }

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

第二个选项

document.getElementById('task_recur').onclick = function() {         
        alert("something checked");
   }

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

Answer 2

我只能看到bug，

$(document).on("change", "#task_recur", function () { // event should be change not checked
    alert("delegated event");
});

,

if($(this).is(':checked'))可以简单地替换为if(this.checked) {}

Answer 3

使用纯javascript:

document.getElementById('task_recur').onclick = function() {
    if (this.checked) {
        alert("Checked);
    }
};

与jquery:

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

$('#task_recur').change(function() {
    if($(this).is(':checked'))
        alert("czech it");
});