复选框单击事件 jQuery - JavaScript

本文将介绍如何使用jQuery来为复选框添加单击事件，以及如何在JavaScript中处理该事件。我们将使用以下HTML代码作为示例：

<input type="checkbox" id="myCheckbox"> My Checkbox

jQuery

为复选框添加单击事件的方法如下：

$(document).ready(function() {
  $('#myCheckbox').click(function() {
    if($(this).is(':checked')) {
      // 复选框已选中
    } else {
      // 复选框已取消选中
    }
  });
});

代码解释：

• $(document).ready：当页面加载完成后，执行以下代码。
• $('#myCheckbox')：选择ID为myCheckbox的元素。
• .click(function() { ... })：为该元素添加单击事件。
• if($(this).is(':checked')) { ... } else { ... }：如果该复选框已选中，则执行第一个代码块。如果该复选框已取消选中，则执行第二个代码块。

JavaScript

如果您不想使用jQuery，也可以使用原生JavaScript添加单击事件：

document.addEventListener('DOMContentLoaded', function() {
  var myCheckbox = document.getElementById('myCheckbox');
  myCheckbox.addEventListener('click', function() {
    if(this.checked) {
      // 复选框已选中
    } else {
      // 复选框已取消选中
    }
  });
});

代码解释：

• document.addEventListener('DOMContentLoaded', ...)：当页面加载完成后，执行以下代码。
• var myCheckbox = document.getElementById('myCheckbox')：选择ID为myCheckbox的元素。
• myCheckbox.addEventListener('click', function() { ... })：为该元素添加单击事件。
• if(this.checked) { ... } else { ... }：如果该复选框已选中，则执行第一个代码块。如果该复选框已取消选中，则执行第二个代码块。

以上是为复选框添加单击事件的方法。您可以根据需求进行调整和修改。