复选框 jQuery 已选中 - JavaScript

在 Web 开发中，复选框是一种常见且有用的元素。而 jQuery 是一个通用的 JavaScript 库，它提供了方便的方法来操作 HTML 元素。本文将介绍如何使用 jQuery 操作已选中的复选框。

获取已选中的复选框

使用 jQuery 获取已选中的复选框很简单，只需使用 :checked 选择器即可。以下是示例代码：

// 获取并计算已选中的复选框数量
var checkedCount = $('input[type="checkbox"]:checked').length;
console.log(checkedCount);

上述代码将会输出页面中已选中的复选框数量。首先，我们使用 $ 函数来获取所有的 input 元素，然后使用 :checked 选择器来获取已选中的复选框。最后，我们计算已选中的复选框数量，并打印到控制台。

操作已选中的复选框

在获取已选中的复选框后，我们可以对它们进行操作，例如删除、禁用等。以下是示例代码：

// 禁用所有已选中的复选框
$('input[type="checkbox"]:checked').attr('disabled', true);

上述代码将会禁用页面上所有已选中的复选框。我们使用 $ 函数获取所有的 input 元素，并使用 :checked 选择器获取所有已选中的复选框。最后，我们使用 attr() 方法来设置 disabled 属性为 true。

执行回调函数

在处理已选中的复选框时，我们可能需要执行一些特定的操作。可以将这些操作包装成一个回调函数，并在获取已选中的复选框后执行。以下是示例代码：

// 处理已选中的复选框
function handleChecked() {
  // ...
}

// 获取并对所有已选中的复选框执行回调函数
$('input[type="checkbox"]:checked').each(function() {
  handleChecked($(this));
});

上述代码将会获取所有已选中的复选框，并对它们依次执行 handleChecked() 函数。我们使用 each() 方法来遍历复选框，并传递选中的复选框作为参数。在 handleChecked() 函数中，我们可以对复选框进行任何处理。

结论

以上是使用 jQuery 操作已选中的复选框的方法。通过使用 :checked 选择器，我们可以轻松地获取已选中的复选框，并对它们进行任何处理。