更改复选框未触发

Posted 2023-03-05

【中文标题】更改复选框未触发

【英文标题】：Checkbox on change is not firing

【发布时间】：2018-02-11 15:50:30

【问题描述】：

我在html页面上有一个复选框：

      <input type="checkbox" id="chk-info" name="chk-info"  /> 

当我尝试编写一个 on change 事件并运行时，它不会被触发。相反，如果我在它触发良好的函数之前放置一条警报消息。

 alert('blah');
 var sth = function()
 function m()
$("input[type='checkbox']").click(function (e) 
            if ($(this).is(':checked')) 
                alert("true");
             else 
                alert("false");
            

        );
   
     return m:m;
    ;

我也尝试过使用 id 选择器，但运气不佳。 谁能帮我指出问题出在哪里？

编辑：当我将复选框选中的函数放在上述函数之外时，它可以很好地与 <input> 标记上附加的 'onchange' 事件配合使用

【问题讨论】：

刚刚测试过，一切正常，这就是你所有的代码吗？

不，我在同一页面中还有其他功能，我在浏览器控制台上看不到任何错误。我也将此事件置于页面加载中。

您能添加完整的 javascript 代码吗？你对复选框做什么？这是与您的复选框交互的唯一代码部分吗？

如果复选框被选中我需要隐藏一个div内容，这就是所有可用的JS代码。

嗯，你提供的代码在我的电脑上运行。所以它没有问题。我确定您的其他代码中正在发生某些事情。去创造一个小提琴：jsfiddle.com

【参考方案1】：

将复选框的onclick事件放在页面加载上。

$(document).ready(function () 
    $("input[type='checkbox']").click(function (e) 
        if ($(this).is(':checked')) 
            alert("true");
         else 
            alert("false");
        
    );
)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<input type="checkbox" id="chk-info" name="chk-info" />
<label for="chk-info">label</label>

【讨论】：

这应该可以，但是在复选框上添加点击处理程序以检查它是否已更改并不是一个好习惯。该复选框也可以通过标签选中/取消选中，在这种情况下，此回调将不会触发。

我已经更新了复选框的标签（上面的代码）并且代码仍然按预期运行。

【参考方案2】：

$(document).ready(function () 
    $("input[type='checkbox']").click(function (e) 
        if ($(this).is(':checked')) 
            $(this).val("true");
         else 
            $(this).val("false");
        
    );
)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<input type="checkbox" id="chk-info" name="chk-info" />
<label for="chk-info">label</label>