jq 监听input checkbox选中事件

可以使用 `change` 事件来监听 `input` 元素的选中状态改变事件。具体可以如下实现：

// 获取checkbox元素
const checkbox = document.querySelector('input[type=checkbox]');

// 监听选中状态改变事件
checkbox.addEventListener('change', function() {
  // 判断选中状态
  if (this.checked) {
    console.log('选中了');
  } else {
    console.log('取消选中');
  }
});

如果你想使用 jQuery 来实现，可以这样：

// 获取checkbox元素
const $checkbox = $('input[type=checkbox]');

// 监听选中状态改变事件
$checkbox.change(function() {
  // 判断选中状态
  if (this.checked) {
    console.log('选中了');
  } else {
    console.log('取消选中');
  }
});

相关问题

checkbox jq 监听 动态生成checkbox并添加监听事件

你可以使用以下方法来动态生成checkbox并添加监听事件：

首先，确保你已经引入了jQuery库。

然后，你可以使用`.append()`方法将checkbox元素动态添加到页面上的某个容器中。在每次生成checkbox时，为其添加一个特定的类名或ID，以便于后续使用。

示例代码如下：

<!-- HTML结构 -->
<div id="checkboxContainer">
  <button id="addCheckbox">添加Checkbox</button>
</div>

<script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
  // 监听按钮点击事件
  $('#addCheckbox').click(function() {
    // 动态创建checkbox元素
    var $checkbox = $('<input type="checkbox">');
    
    // 给checkbox添加监听事件
    $checkbox.on('change', function() {
      // 当checkbox状态改变时执行的操作
      if ($(this).is(':checked')) {
        console.log('Checkbox已选中');
      } else {
        console.log('Checkbox未选中');
      }
    });
    
    // 将checkbox添加到容器中
    $('#checkboxContainer').append($checkbox);
  });
});
</script>

以上代码中，通过点击按钮"添加Checkbox"，会动态创建一个checkbox元素，并将其添加到id为"checkboxContainer"的容器中。每次生成的checkbox都会附加一个监听事件，当其状态改变时，会在控制台输出相应的消息。

希望对你有所帮助！如有其他问题，请随时提问。