如何使用 jQuery 获取未选中复选框的标签值-php教程-PHP中文网

如何使用 jQuery 获取未选中复选框的标签值

霞舞

发布： 2025-10-10 10:44:23

原创

433人浏览过

如何使用 jquery 获取未选中复选框的标签值

本文介绍了如何使用 jQuery 动态获取页面上所有未选中复选框对应的标签文本，并将其存储到一个数组中。通过该方法，你可以方便地在表单提交或其他交互场景中获取这些标签值，并进行后续处理，例如发送到服务器端。

获取未选中复选框标签值的步骤

以下是如何使用 jQuery 获取未选中复选框标签值的详细步骤：

引入 jQuery 库： 确保你的 HTML 文件中已经包含了 jQuery 库。你可以从 jQuery 官网下载，或者使用 CDN 引入。
```
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
```
登录后复制
编写 jQuery 代码： 使用 jQuery 选择器找到所有未选中的复选框，然后遍历它们，获取它们对应的标签文本，并将其存储到一个数组中。
```
$(document).ready(function() {
  var unCheckedLabelText = []; // 用于存储未选中复选框的标签文本
  $('.checkboxClass').click(function() {
    unCheckedLabelText = []; // 每次点击时清空数组
    $("input:checkbox:not(:checked)").each(function() {
      var text = $(this).next('label').text(); // 获取标签文本
      unCheckedLabelText.push(text); // 将标签文本添加到数组中
    });
    console.log(unCheckedLabelText); // 输出数组，用于调试
    // 在这里可以将 unCheckedLabelText 发送到服务器端，或者进行其他处理
  });
});
```
登录后复制
代码解释：

慧中标AI标书
慧中标AI标书是一款AI智能辅助写标书工具。

120

查看详情
- $(document).ready(function() { ... });：确保在 DOM 加载完成后执行代码。
- var unCheckedLabelText = [];：声明一个空数组，用于存储未选中复选框的标签文本。
- $('.checkboxClass').click(function() { ... });：为所有 class 为 checkboxClass 的元素绑定点击事件。这里假设你的复选框都有一个相同的 class，方便选择。
- unCheckedLabelText = [];：每次点击时清空数组，确保数组中只包含当前未选中的复选框的标签文本。
- $("input:checkbox:not(:checked)").each(function() { ... });：使用 jQuery 选择器 :checkbox:not(:checked) 找到所有未选中的复选框。 each() 方法用于遍历这些复选框。
- var text = $(this).next('label').text();：在 each() 循环中，$(this) 指的是当前遍历到的复选框。 next('label') 找到紧跟在复选框后面的 <label> 元素。 text() 方法用于获取标签的文本内容。
- unCheckedLabelText.push(text);：将获取到的标签文本添加到 unCheckedLabelText 数组中。
- console.log(unCheckedLabelText);：将数组输出到控制台，方便调试。

HTML 结构： 确保你的 HTML 结构如下所示，复选框和标签是相邻的，并且标签紧跟在复选框后面。

<input type="checkbox" id="firstCheckbox" name="firstCheckbox" class="checkboxClass">
<label for="firstCheckbox">Attendance to shifts are regular and no last minute shift cancellation</label>

<input type="checkbox" id="secondCheckbox" name="secondCheckbox" class="checkboxClass">
<label for="secondCheckbox">Attendance to shifts are regular and no last minute shift cancellation</label>

登录后复制

注意： for 属性的值必须与复选框的 id 属性的值相同，这样点击标签时才能选中或取消选中复选框。

完整示例代码

<!DOCTYPE html>
<html>
<head>
  <title>获取未选中复选框的标签值</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script>
    $(document).ready(function() {
      var unCheckedLabelText = [];
      $('.checkboxClass').click(function() {
        unCheckedLabelText = [];
        $("input:checkbox:not(:checked)").each(function() {
          var text = $(this).next('label').text();
          unCheckedLabelText.push(text);
        });
        console.log(unCheckedLabelText);
      });
    });
  </script>
</head>
<body>
  <input type="checkbox" id="firstCheckbox" name="firstCheckbox" class="checkboxClass">
  <label for="firstCheckbox">Attendance to shifts are regular and no last minute shift cancellation</label><br>

  <input type="checkbox" id="secondCheckbox" name="secondCheckbox" class="checkboxClass">
  <label for="secondCheckbox">Attendance to shifts are regular and no last minute shift cancellation</label><br>

  <input type="checkbox" id="thirdCheckbox" name="thirdCheckbox" class="checkboxClass">
  <label for="thirdCheckbox">Another checkbox example</label><br>
</body>
</html>

登录后复制

注意事项

选择器： 确保你的 jQuery 选择器能够准确地找到你想要操作的复选框。如果你的复选框没有相同的 class，你可以使用其他选择器，例如 input[type="checkbox"]。
HTML 结构： 代码假设标签紧跟在复选框后面。如果你的 HTML 结构不同，你需要修改 next('label') 部分的代码。
事件绑定： 代码绑定的是 click 事件。你也可以根据需要绑定其他事件，例如 change 事件。
数据处理： 获取到未选中复选框的标签文本后，你可以将其发送到服务器端，或者进行其他处理。