jquery查询已勾选的复选框-CFANZ编程社区

使用jQuery查询已勾选的复选框

在网页开发中，复选框是一种常见的用户交互元素，它允许用户选择一个或多个选项。在某些场景下，我们需要通过代码获取已经勾选的复选框的值，以便进行后续的处理。本文将介绍如何使用jQuery来查询已勾选的复选框，并提供相关的代码示例。

了解复选框

在深入了解如何查询已勾选的复选框之前，我们先来了解一下复选框的基本结构和属性。

复选框的HTML结构通常如下所示：

<input type="checkbox" id="checkbox1" name="checkbox" value="value1">
<label for="checkbox1">选项1</label>

其中，<input> 元素的 type 属性设置为 "checkbox"，id 属性用于唯一标识该复选框，name 属性用于将多个复选框组织在一起，value 属性用于设置该复选框的值。

<label> 元素用于显示复选框的文本描述，通过 for 属性与对应的 <input> 元素关联起来。

使用jQuery查询已勾选的复选框

jQuery是一款功能强大、易于使用的JavaScript库，它提供了丰富的API，方便我们操作和查询HTML文档。

要查询已勾选的复选框，我们可以使用 jQuery 的选择器和属性选择器进行过滤。以下是查询已勾选的复选框的代码示例：

// 选择所有已勾选的复选框
var checkedCheckboxes = $('input[type="checkbox"]:checked');

// 遍历已勾选的复选框并获取值
checkedCheckboxes.each(function() {
  var value = $(this).val();
  console.log(value);
});

在上述代码中，首先使用选择器 $('input[type="checkbox"]:checked') 选择所有已勾选的复选框。然后，通过 .each() 方法遍历已勾选的复选框，并使用 .val() 方法获取每个复选框的值。

你可以根据实际需求，对获取到的值进行进一步的处理，例如将其存储到数组中，或者根据不同的值执行不同的操作。

示例与应用

下面我们通过一个具体的示例来演示如何使用 jQuery 查询已勾选的复选框，并将结果展示在饼状图中。

<!DOCTYPE html>
<html>
<head>
  <title>已勾选复选框查询示例</title>
  <script src="
  <script src="
  <style>
    #chart {
      height: 300px;
      width: 300px;
      margin: 20px;
    }
  </style>
</head>
<body>
  已勾选复选框查询示例
  <input type="checkbox" id="checkbox1" name="checkbox" value="value1">
  <label for="checkbox1">选项1</label>
  <br>
  <input type="checkbox" id="checkbox2" name="checkbox" value="value2">
  <label for="checkbox2">选项2</label>
  <br>
  <input type="checkbox" id="checkbox3" name="checkbox" value="value3">
  <label for="checkbox3">选项3</label>
  <br>
  <button id="btn">查询已勾选的复选框</button>
  <div id="chart"></div>

  <script>
    $('#btn').click(function() {
      var checkedCheckboxes = $('input[type="checkbox"]:checked');
      var data = [];

      checkedCheckboxes.each(function() {
        var value = $(this).val();
        data.push(value);
      });

      // 绘制饼状图
      mermaid.initialize({
        startOnLoad: true,
        theme: 'default'
      });
      mermaid.mermaidAPI.render('chart', `
        pie
        ${data.join('\n')}
      `);
    });
  </script>
</body>
</html>

在上面的示例中，我们创建了三个复选框和一个按钮。