jquery checkbox获取选中的值

原创

mob64ca12dd07fb 2023-11-21 05:59:44 ©著作权

文章标签 复选框 jQuery javascript 文章分类 jQuery 前端开发

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

jQuery Checkbox获取选中的值

在Web开发中，经常会使用复选框（checkbox）来让用户在一组选项中进行多选。当用户勾选或取消勾选复选框时，我们常常需要获取用户选中的值，以便进行后续的处理。本文将介绍使用jQuery来获取选中的复选框的值，并提供相应的代码示例。

什么是jQuery？

jQuery是一个快速、简洁的JavaScript库，它封装了跨浏览器操作HTML文档、处理事件、创建动画和简化AJAX等常见任务的功能。jQuery的主要目标是使JavaScript开发更加简单、快捷、兼容各种浏览器。

使用jQuery选择复选框

在HTML中，我们可以使用<input type="checkbox">元素创建一个复选框，如下所示：

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

上述代码创建了三个复选框，它们都具有相同的name属性值fruits，但是value属性值分别是apple、orange和banana。

使用jQuery选择复选框可以使用以下语法：

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

上述代码使用jQuery选择器选择了所有被选中的复选框。此选择器首先选择所有type属性为checkbox的input元素，然后使用:checked伪类选择被选中的复选框。

获取选中的复选框值

一旦我们选择了被选中的复选框，我们可以使用.val()方法来获取其值。例如，我们可以使用以下代码获取用户选中的值：

var selectedValues = $('input[type="checkbox"]:checked').map(function() {
  return $(this).val();
}).get();

上述代码首先使用.map()方法遍历所有被选中的复选框，然后使用.val()方法获取每个复选框的值，并将其添加到一个数组中。最后，使用.get()方法将数组返回。

示例代码

下面是一个完整的示例代码，演示了如何使用jQuery获取选中的复选框的值：

<!DOCTYPE html>
<html>
<head>
  <title>jQuery Checkbox获取选中的值</title>
  <script src="
</head>
<body>
  <h2>请选择您喜欢的水果：</h2>
  <input type="checkbox" name="fruits" value="apple"> Apple
  <input type="checkbox" name="fruits" value="orange"> Orange
  <input type="checkbox" name="fruits" value="banana"> Banana
  <button id="submitBtn">提交</button>

  <script>
    $(document).ready(function() {
      $('#submitBtn').on('click', function() {
        var selectedValues = $('input[type="checkbox"]:checked').map(function() {
          return $(this).val();
        }).get();
        
        console.log(selectedValues);
      });
    });
  </script>
</body>
</html>

上述代码中，我们在页面上放置了三个复选框和一个提交按钮。当用户勾选了某些复选框并点击提交按钮时，控制台将会输出用户选中的值。