选中的 jQuery 复选框 - JavaScript

复选框是一种用于允许用户选择多个选项的表单元素。使用 jQuery，可以轻松地确定哪些复选框被选中，然后对它们执行适当的操作。

选择复选框

要选择复选框，可以使用 jQuery 的 :checked 选择器。这个选择器将返回所有已选中的复选框。

var checkedBoxes = $("input[type='checkbox']:checked");

在上面的代码片段中，我们选择了所有类型为 checkbox 的 input 元素，并使用 :checked 选择器获取了所有已选中的复选框。

操作选中的复选框

选中的复选框可以执行各种操作，例如获取它们的值，取消选中它们等等。

获取选中的值

获取选中的复选框的值，可以使用 jQuery 的 val() 方法。这个方法将返回一个数组，包含所有选中的复选框的值。

var checkedValues = checkedBoxes.map(function() {
  return $(this).val();
}).get();

在上面的代码片段中，我们使用 map() 方法将所有选中的复选框的值存储到一个数组中。

取消选中

要取消选中一个复选框，可以使用 jQuery 的 prop() 方法来设置 checked 属性为 false。

checkedBoxes.prop("checked", false);

在上面的代码片段中，我们将所有选中的复选框的 checked 属性设置为 false，从而取消了它们的选中状态。

示例代码

下面是一个完整的示例代码，演示了如何选择和操作选中的复选框。

$(function() {
  $("#submit-btn").click(function() {
    var checkedBoxes = $("input[type='checkbox']:checked");
    var checkedValues = checkedBoxes.map(function() {
      return $(this).val();
    }).get();
    console.log(checkedValues);
    checkedBoxes.prop("checked", false);
  });
});

在上面的代码片段中，我们定义了一个 click 事件处理程序，它会在点击提交按钮时执行。在事件处理程序中，我们选择所有已选中的复选框，并将它们的值存储到一个数组中。然后我们将所有选中的复选框取消选中。

总结

使用 jQuery，可以轻松地选择和操作选中的复选框。使用 :checked 选择器可以很方便地确定哪些复选框被选中，然后可以使用 val() 方法获取它们的值，或使用 prop() 方法取消它们的选中状态。