jQuery 获取选中的复选框

在 Web 开发中，复选框（Checkbox） 是一种常用的表单控件，通常用于让用户从多个选项中选择一个或多个选项。当用户选中或取消选中复选框时，我们需要使用 JavaScript 或 jQuery 来获取其选中状态以及对应的值。

获取单个复选框的选中状态

为了获取单个复选框的选中状态，我们需要使用 jQuery 的 prop() 方法。prop() 方法用于获取或设置 DOM 元素的属性值。 在复选框中，我们需要获取该元素的 checked 属性值，以判断其是否被选中。

// HTML 代码
<input type="checkbox" id="checkbox-1" value="apple"> Apple

// jQuery 代码
let isChecked = $("#checkbox-1").prop("checked");
// isChecked 为 true（选中）或 false（未选中）

获取多个复选框的选中状态

当需要获取多个复选框的选中状态时，我们可以遍历所有的复选框元素，并分别获取其选中状态和对应的值。下面是一个获取所有复选框的选中状态和值的示例：

// HTML 代码
<input type="checkbox" id="checkbox-1" value="apple"> Apple
<input type="checkbox" id="checkbox-2" value="banana"> Banana
<input type="checkbox" id="checkbox-3" value="cherry"> Cherry

// jQuery 代码
$("#btn").click(function() { // 点击按钮时获取所有选中的复选框
  let checkedBoxes = $("input[type='checkbox']:checked"); // 选择所有选中的复选框元素
  let values = []; // 用于存放选中的值
  checkedBoxes.each(function() { // 遍历所有选中的复选框元素
    values.push($(this).val()); // 获取其值并加入数组
  });
  console.log(values); // 打印选中的值
});

结语

使用 jQuery 来获取复选框的选中状态和值非常方便。我们可以通过 prop() 方法来获取单个复选框的选中状态，也可以通过遍历多个复选框元素来获取所有选中的值。在实际项目中，我们需要根据具体业务场景来选择合适的方法。