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

Question

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

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

到目前为止，我的方法包括以下内容:

方法1:Onclick处理程序

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事件监听器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");
});

方法3:jquery监听器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>