使用onchange提交获取多选复选框值并保留选中状态问题

看起来你是想实现「勾选/取消复选框时自动提交，同时保留所有已选中状态」的功能，但目前因为每次只传了单个复选框的值，导致PHP那边只能拿到最后一次提交的内容。别担心，咱们一步步解决这个问题：

核心问题分析 #

你之前的实现大概率是每次只提交了当前触发change事件的那个复选框，而没有把所有当前选中的复选框值一起传递给后端。另外，要确保复选框的name属性是数组格式（name="marca[]"），否则PHP无法识别为数组，只会保留最后一个传入的值。

方案1：表单提交（页面刷新场景） #

这种方式适合需要刷新页面展示筛选结果的场景，步骤很简单：

1. 修正HTML结构 #

确保所有复选框的name是marca[]，并且包裹在一个表单里，同时用PHP回显之前的选中状态：

<form id="marcaFilterForm" method="get" action="你的后端页面.php">
  <input type="checkbox" name="marca[]" value="ford" <?php echo isset($_GET['marca']) && in_array('ford', $_GET['marca']) ? 'checked' : ''; ?>> Ford
  <input type="checkbox" name="marca[]" value="toyota" <?php echo isset($_GET['marca']) && in_array('toyota', $_GET['marca']) ? 'checked' : ''; ?>> Toyota
  <input type="checkbox" name="marca[]" value="honda" <?php echo isset($_GET['marca']) && in_array('honda', $_GET['marca']) ? 'checked' : ''; ?>> Honda
</form>

这段PHP代码会在页面刷新后，自动把之前选中的复选框标记为checked，完美保留用户的选择状态。

2. jQuery监听change事件提交表单 #

不需要单独处理每个复选框的值，直接提交整个表单即可——表单会自动收集所有选中的marca[]值，作为数组传给后端：

$('input[name="marca[]"]').on('change', function() {
  $('#marcaFilterForm').submit();
});

方案2：AJAX提交（无刷新场景） #

如果不想刷新页面，用AJAX异步提交的话，需要手动收集所有选中的复选框值：

jQuery代码实现 #

$('input[name="marca[]"]').on('change', function() {
  // 收集所有选中的品牌值，转成数组
  var selectedMarcas = $('input[name="marca[]"]:checked').map(function() {
    return $(this).val();
  }).get();

  // 发送AJAX GET请求，jQuery会自动把数组转成marca[]=xxx&marca[]=yyy的格式
  $.ajax({
    url: '你的后端页面.php',
    method: 'GET',
    data: { marca: selectedMarcas },
    success: function(response) {
      // 这里可以处理后端返回的结果，比如更新页面内容
      console.log('当前选中的品牌：', selectedMarcas);
    },
    error: function() {
      console.log('提交失败，请重试');
    }
  });
});

后端PHP处理 #

不管用哪种方案，后端都可以通过$_GET['marca']拿到完整的选中数组。记得先判断数组是否存在，避免报错：

if(isset($_GET['marca']) && is_array($_GET['marca'])) {
  // 遍历处理选中的品牌数组
  foreach($_GET['marca'] as $marca) {
    echo '选中的品牌：' . $marca . '<br>';
  }
} else {
  echo '没有选中任何品牌';
}

这样就能完美解决「仅保留最后一次提交内容」的问题啦，每次提交都会传递所有当前选中的复选框值，同时页面刷新后也能保留选中状态~

内容的提问来源于stack exchange，提问作者Gabriel Souza