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

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

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

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

1. 引入 jQuery 库： 确保你的 HTML 文件中已经包含了 jQuery 库。你可以从 jQuery 官网下载，或者使用 CDN 引入。

2. 编写 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 发送到服务器端，或者进行其他处理
     });
   });

   代码解释：

   

   ReRoom AI

   专为室内设计打造的AI渲染工具，可以将模型图、平面图、草图、照片转换为高质量设计效果图。

   下载
   • $(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') 找到紧跟在复选框后面的 元素。 text() 方法用于获取标签的文本内容。
   • unCheckedLabelText.push(text);： 将获取到的标签文本添加到 unCheckedLabelText 数组中。
   • console.log(unCheckedLabelText);： 将数组输出到控制台，方便调试。

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

   
   Attendance to shifts are regular and no last minute shift cancellation
   
   
   Attendance to shifts are regular and no last minute shift cancellation

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

完整示例代码

  
  
  


  
  Attendance to shifts are regular and no last minute shift cancellation


  
  Attendance to shifts are regular and no last minute shift cancellation


  
  Another checkbox example

注意事项

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

总结

本文介绍了如何使用 jQuery 获取未选中复选框的标签值。通过这种方法，你可以方便地在表单提交或其他交互场景中获取这些标签值，并进行后续处理。 记住根据你的实际 HTML 结构和需求，修改代码中的选择器和事件绑定。