如何使用jQuery获取未选中复选框的label文本值并提交到PHP后端

现有代码问题梳理 #

• 选择器不匹配：JS中绑定事件用的类选择器是.checkbox_0，但HTML中复选框的类是checked_0，拼写不一致导致事件根本没有绑定成功
• 逻辑时机不对：需求是表单提交时获取未选中项，现有代码绑定的是复选框点击事件，触发时机不符合要求
• 没有存储收集到的文本：遍历未选中项时只执行了取文本的操作，没有把值存到变量里，也没有后续的提交逻辑

修复后完整代码 #

HTML代码

<form id="checkboxForm">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <input type="checkbox" id="firstCheckbox" name="firstCheckbox" class="checked_0">
  <label for="firstCheckbox">Attendance to shifts are regular and no last minute shift cancellation</label>
  <br>
  <input type="checkbox" id="secondCheckbox" name="secondCheckbox" class="checked_0">
  <label for="secondCheckbox">Attendance to shifts are regular and no last minute shift cancellation</label>
  <br>
  <button type="submit">提交表单</button>
</form>

JS代码

// 监听表单提交事件
$('#checkboxForm').submit(function(e) {
  // 阻止表单默认跳转提交行为
  e.preventDefault();
  // 定义数组存储未选中复选框对应的label文本
  let unCheckedLabels = [];
  // 遍历所有未选中的目标复选框
  $(".checked_0:not(:checked)").each(function() {
    // 获取对应label文本，去除首尾空白后推入数组
    unCheckedLabels.push($(this).next('label').text().trim());
  });
  // 将数据发送到PHP后端处理
  $.ajax({
    url: '替换为你的PHP处理文件路径.php',
    type: 'POST',
    data: {
      unCheckedList: unCheckedLabels
    },
    success: function(res) {
      // 请求成功后的自定义处理逻辑
      console.log('提交成功', res);
    },
    error: function(err) {
      // 请求失败后的自定义处理逻辑
      console.log('提交失败', err);
    }
  })
})

PHP接收处理示例

<?php
// 接收前端传过来的未选中项数组
$unCheckedList = isset($_POST['unCheckedList']) ? $_POST['unCheckedList'] : [];
// 此处编写你的业务处理逻辑，比如数据入库、校验等
// 示例：输出接收的内容用于调试
var_dump($unCheckedList);
?>

内容的提问来源于stack exchange，提问作者ZaIn Ul AbiDeen Sān