jquery - 检查复选框何时转动

Question

当复选框从未选中状态更改为选中状态时，我需要运行一个函数。

因此，我使用 .change 事件来触发所有内容，但在运行该函数之前使用 .prop 检查以确保该复选框实际上已选中或未选中，对吧？

<form>
  <input class="target" type="checkbox" value="Field 1">
</form>

$(".target").change( function(){
    if(this.prop("checked", true)){
        alert("this is checked");
    } else {
        alert("this is not checked");
    }
});

上面的代码不起作用，我不知道为什么......

我选择了.target，它正在调用.change事件监听器。

.target 是 this，因为它正在调用 .change 方法。

所以该函数的意思是“当 .target 更改时，检查 .target 的“checked”属性是否为 true。如果是，则发出警报。否则，提醒其他事情。”

在 .change 的 jQuery 文档中，它说“当元素的值更改时，更改事件将发送到元素。”他们谈论的值不是元素的.val，对吗？完全不同的“值(value)”。因为 .target 的 .val 永远不会改变，因为它目前是硬编码的。

Answer 1

简单的方法是使用 $(this).is(":checked") 来处理 if 或 else，例如:

$(".target").change( function(){
    if($(this).is(":checked")){
        alert("this is checked");
    } else {
        alert("this is not checked");
    }
});

因为需要检查是否被选中，所以不设置值为checked。并且this没有.prop()，您需要使用Jquery对象$(this)。

LIVE DEMO

编辑

在测试 .prop() 后，我对 .is() 与 .prop() 的性能有一些错误比 .is() 更快。​​

两者都会给我们相同的结果，但 .is() 速度较慢。

$(".target").change( function(){
        if($(this).prop(":checked")){
            alert("this is checked");
        } else {
            alert("this is not checked");
        }
    });

或者更快:

$(".target").change( function(){
            if(this.checked){
                alert("this is checked");
            } else {
                alert("this is not checked");
            }
        });

Test performance .is() vs .prop()