jquery获取复选框被选中的值

获取复选框被选中的值是前端开发中比较常见的一个任务。在jQuery中，可以通过以下步骤来实现：

1. 编写 HTML

首先，需要在HTML中创建一个或多个复选框，例如：

<input type="checkbox" name="fruits[]" value="apple"> Apple
<input type="checkbox" name="fruits[]" value="banana"> Banana
<input type="checkbox" name="fruits[]" value="orange"> Orange

其中，name属性的值必须相同，且都以一个数组方括号结尾，这样提交表单时才能正确地将所有被选中的复选框的值一同传递给后端。

2. 使用 jQuery 获取复选框的值

使用jQuery获取所有被选中的复选框的值，可以通过以下两种方法实现：

方法一：使用 .each() 方法

var selectedValues = [];
$('input[name="fruits[]"]:checked').each(function() {
  selectedValues.push(this.value);
});
console.log(selectedValues);

这个方法使用了 .each() 方法和选择器 $('input[name="fruits[]"]:checked') 来找到被选中的复选框，并使用 this.value 将其值添加到一个数组中。最后，可以使用 console.log() 显示所选值的数组。

方法二：使用 .map() 方法

var selectedValues = $('input[name="fruits[]"]:checked').map(function() {
  return this.value;
}).get();
console.log(selectedValues);

使用 .map() 方法来实现之前的相同目标，这个方法返回一个新的jQuery对象，其中包含所有被选中的复选框的值。 .get() 方法将该对象转换为常规的数组，最后将所选值的数组打印到控制台。

示例

示例一：创建HTML

<input type="checkbox" name="countries[]" value="china"> China
<input type="checkbox" name="countries[]" value="japan"> Japan
<input type="checkbox" name="countries[]" value="usa"> USA
<input type="button" id="btnGetSelectedValues" value="Get Selected Values">

示例一：方法一

$('#btnGetSelectedValues').click(function() {
  var selectedValues = [];
  $('input[name="countries[]"]:checked').each(function() {
    selectedValues.push(this.value);
  });
  console.log(selectedValues);
});

示例一：方法二

$('#btnGetSelectedValues').click(function() {
  var selectedValues = $('input[name="countries[]"]:checked').map(function() {
    return this.value;
  }).get();
  console.log(selectedValues);
});

示例二：创建HTML

<input type="checkbox" name="colors[]" value="red"> Red
<input type="checkbox" name="colors[]" value="blue"> Blue
<input type="checkbox" name="colors[]" value="green"> Green
<input type="button" id="btnGetSelectedValues" value="Get Selected Values">

示例二：方法一

$('#btnGetSelectedValues').click(function() {
  var selectedValues = [];
  $('input[name="colors[]"]:checked').each(function() {
    selectedValues.push(this.value);
  });
  console.log(selectedValues);
});

示例二：方法二

$('#btnGetSelectedValues').click(function() {
  var selectedValues = $('input[name="colors[]"]:checked').map(function() {
    return this.value;
  }).get();
  console.log(selectedValues);
});

以上就是获取复选框被选中的值的完整攻略，希望能对你有所帮助。