如何获取jquery多选框选择的值？

发布时间：2023-05-18

jQuery是一个非常流行的JavaScript库，提供了各种方法和函数，可以让开发者更加轻松地处理HTML和CSS以及各种浏览器事件。其中，多选框是常见的UI组件之一，本文将从多个方面介绍如何使用jQuery获取多选框的选中值。

一、通过val()方法获取选中值

val()方法是jQuery用于获取表单元素的方法之一，其可以获取单选框、多选框和输入框的值。

<!-- HTML示例 -->
<form>
  <input type="checkbox" name="option" value="apple"> 苹果<br>
  <input type="checkbox" name="option" value="banana"> 香蕉<br>
  <input type="checkbox" name="option" value="orange"> 橙子
</form>

// jQuery示例
$('input[name="option"]:checked').each(function() {
  console.log($(this).val());
});

上述代码使用了选择器选取了所有被选中的多选框，然后使用each()方法遍历它们，再利用val()方法获取每个多选框选中的值。

二、使用serializeArray()方法获取选中值

serializeArray()方法可以将一个或多个表单元素的值序列化成一个数组，这个数组可以轻松地被提交到服务器以便进行进一步的处理。

<!-- HTML示例 -->
<form>
  <input type="checkbox" name="option" value="apple"> 苹果<br>
  <input type="checkbox" name="option" value="banana"> 香蕉<br>
  <input type="checkbox" name="option" value="orange"> 橙子
</form>

// jQuery示例
console.log($('form').serializeArray());

上述代码使用了选择器选取了整个表单，然后使用serializeArray()方法序列化了这个表单并打印出了结果。

三、使用map()方法获取选中值

map()方法可以遍历一个数组，并将其中的每个元素转换成一个新的元素。

<!-- HTML示例 -->
<form>
  <input type="checkbox" name="option" value="apple"> 苹果<br>
  <input type="checkbox" name="option" value="banana"> 香蕉<br>
  <input type="checkbox" name="option" value="orange"> 橙子
</form>

// jQuery示例
var selectedOptions = $('input[name="option"]:checked').map(function() {
  return $(this).val();
}).get();
console.log(selectedOptions);

上述代码使用了选择器选取了所有被选中的多选框，然后使用map()方法遍历它们，再利用val()方法获取每个多选框选中的值，最终使用get()方法把结果转换成一个数组并打印出来。

四、使用each()方法获取选中值

each()方法可以遍历一个数组或对象，并执行一个回调函数。

<!-- HTML示例 -->
<form>
  <input type="checkbox" name="option" value="apple"> 苹果<br>
  <input type="checkbox" name="option" value="banana"> 香蕉<br>
  <input type="checkbox" name="option" value="orange"> 橙子
</form>

// jQuery示例
var selectedOptions = [];
$('input[name="option"]:checked').each(function() {
  selectedOptions.push($(this).val());
});
console.log(selectedOptions);

上述代码使用选择器选取了所有被选中的多选框，然后使用each()方法遍历它们，再利用val()方法获取每个多选框选中的值并存储到selectedOptions数组中，最终打印出来。

五、使用prop()方法获取选中值

prop()方法可以用于获取元素的属性，例如选中状态。

<!-- HTML示例 -->
<form>
  <input type="checkbox" name="option" value="apple"> 苹果<br>
  <input type="checkbox" name="option" value="banana"> 香蕉<br>
  <input type="checkbox" name="option" value="orange"> 橙子
</form>

// jQuery示例
var selectedOptions = [];
$('input[name="option"]').each(function() {
  if ($(this).prop('checked')) {
    selectedOptions.push($(this).val());
  }
});
console.log(selectedOptions);

上述代码使用了选择器选取了所有的多选框，然后使用each()方法遍历它们，再利用prop()方法获取每个多选框的checked属性来判断是否选中，选中则将其值存储到selectedOptions数组中，最终打印出来。

总结

以上就是通过多种方法获取jQuery多选框选择的值的方法，使用这些方法可以让我们更加方便地处理表单数据。需要注意的是，在使用map()方法或each()方法获取多选框的选中值时，要注意判断选中状态。

推荐文章