`.click` 和 `.change` 在复选框上的区别

当您在处理复选框时，.click() 和 .change() 是两个常用的事件处理方法。尽管它们都可以被用于监听复选框的变化，但它们之间有着细微的差异。

.click()

.click() 方法是一个通用的绑定点击事件的方法，可以应用于大多数 HTML 元素，包括复选框。.click() 会在元素被单击时触发，无论是否已经被选中。

$('#myCheckbox').click(function() {
  // 这里的代码会在每次单击 #myCheckbox 时执行
});

如果您想要在用户点击复选框时执行某些动作，而不仅仅是在复选框状态发生更改时，请使用 .click()。

.change()

.change() 方法是专门为 HTML 表单元素而设计的，它仅在表单元素的值发生实际更改时才触发。对于复选框和单选按钮，这意味着只有在勾选或取消勾选时才会触发。

$('#myCheckbox').change(function() {
  // 这里的代码只会在 #myCheckbox 的值发生更改时执行
});

如果您只关心当复选框的状态发生变化时，就需要使用 .change()。

.prop()

除了 .click() 和 .change()，您还可以使用 .prop() 来访问复选框的选中状态。.prop() 是 jQuery 中用于设置和获取元素属性的方法。在复选框上，可以使用 .prop('checked') 来获取它是否被选中。

if ($('#myCheckbox').prop('checked')) {
  // 这里的代码会在 #myCheckbox 被勾选时执行
}

总结

综上所述，.click() 适用于需要在单击元素时处理事件的情况。.change() 适用于需要在表单元素的值实际更改时才处理事件的情况，特别是复选框和单选按钮。如果您只关心复选框是否被选中，则应使用 .prop('checked')。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/28217