jquery 多个checkbox 是否有选中

原创

mob64ca12f86e32 2023-08-17 15:03:20 ©著作权

文章标签 jQuery javascript 网页开发 文章分类 jQuery 前端开发

©著作权归作者所有：来自51CTO博客作者mob64ca12f86e32的原创作品，请联系作者获取转载授权，否则将追究法律责任

jQuery多个checkbox是否有选中

简介

在网页开发中，有时候需要对多个checkbox进行操作，比如判断是否有选中的checkbox，获取选中的checkbox的值等。本文将介绍如何使用jQuery来实现这些功能。

获取多个checkbox的选中状态

要判断多个checkbox是否有选中，可以使用is(':checked')方法。该方法返回一个布尔值，表示该元素是否被选中。

首先，我们需要给每个checkbox添加一个相同的class，方便进行选择器操作。假设我们的checkbox的class为checkbox-item，代码如下：

<input type="checkbox" class="checkbox-item">
<input type="checkbox" class="checkbox-item">
<input type="checkbox" class="checkbox-item">

然后，我们可以使用以下代码来判断是否有选中的checkbox：

if ($('.checkbox-item').is(':checked')) {
  console.log('有选中的checkbox');
} else {
  console.log('没有选中的checkbox');
}

以上代码中，$('.checkbox-item')表示选择所有class为checkbox-item的元素，.is(':checked')表示判断这些元素是否有被选中。如果有任意一个checkbox被选中，就会输出"有选中的checkbox"，否则输出"没有选中的checkbox"。

获取选中的checkbox的值

如果我们需要获取选中的checkbox的值，可以使用each()方法来遍历所有选中的checkbox。

首先，我们还是需要给checkbox添加相同的class，代码如下：

<input type="checkbox" class="checkbox-item" value="1">
<input type="checkbox" class="checkbox-item" value="2">
<input type="checkbox" class="checkbox-item" value="3">

然后，我们可以使用以下代码来获取选中的checkbox的值：

var selectedValues = [];

$('.checkbox-item:checked').each(function() {
  selectedValues.push($(this).val());
});

console.log(selectedValues);

以上代码中，$('.checkbox-item:checked')表示选择所有class为checkbox-item且被选中的元素，.each()表示对这些元素进行遍历。在遍历的过程中，我们使用$(this).val()来获取每个选中的checkbox的值，并将其添加到数组selectedValues中。最后，我们通过console.log(selectedValues)来输出选中的checkbox的值。