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

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

`DEMO`

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

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

3 个答案:

`DEMO`