本文介绍了如何使用 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 发送到服务器端，或者进行其他处理 }); });代码解释：
- $(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 事件。
- 数据处理： 获取到未选中复选框的标签文本后，你可以将其发送到服务器端，或者进行其他处理。
总结
本文介绍了如何使用 jQuery 获取未选中复选框的标签值。通过这种方法，你可以方便地在表单提交或其他交互场景中获取这些标签值，并进行后续处理。 记住根据你的实际 HTML 结构和需求，修改代码中的选择器和事件绑定。
