如何实现表单点击按钮仅显示已勾选字段、隐藏未勾选字段并提交

嘿，我来帮你搞定这个需求！你已经实现了输入字段变化时自动勾选对应复选框的功能，接下来要完成点击按钮后隐藏未勾选字段+仅提交已勾选字段的功能，用jQuery就能轻松实现，分两步来：

第一步：调整HTML（给按钮加ID方便绑定事件） #

先给你的按钮加个唯一ID，这样我们能更精准地触发逻辑：

<div class="form-group">
  <div class="checkbox">
    <input value="1" name="checkbox-1" id="checkbox-1" type="checkbox"/>
    <label for="checkbox-1"></label>
  </div>
  <div class="field">
    <input type="text" value="" id="field-1" name="field-1">
    <label class="form-label">Field 1</label>
  </div>
</div>
<div class="form-group">
  <div class="checkbox">
    <input value="1" name="checkbox-2" id="checkbox-2" type="checkbox"/>
    <label for="checkbox-2"></label>
  </div>
  <div class="field">
    <input type="text" value="" id="field-2" name="field-2">
    <label class="form-label">Field 2</label>
  </div>
</div>
<div class="form-group">
  <div class="checkbox">
    <input value="1" name="checkbox-3" id="checkbox-3" type="checkbox"/>
    <label for="checkbox-3"></label>
  </div>
  <div class="field">
    <input type="text" value="" id="field-3" name="field-3">
    <label class="form-label">Field 3</label>
  </div>
</div>
<button type="button" id="toggleFieldsBtn">筛选已填字段</button>
<!-- 建议给表单加个ID，方便处理提交：<form id="myForm">...</form> -->

第二步：编写jQuery逻辑 #

把以下代码加到你现有的jQuery代码后面，就能实现两个核心功能：

1. 点击按钮隐藏未勾选的字段组 #

// 点击按钮筛选显示已勾选的字段
$('#toggleFieldsBtn').on('click', function() {
  $('.form-group').each(function() {
    const $checkbox = $(this).find('input[type=checkbox]');
    // 未勾选的字段组隐藏，已勾选的确保显示
    if (!$checkbox.is(':checked')) {
      $(this).hide();
    } else {
      $(this).show();
    }
  });
});

2. 提交表单时仅发送已勾选的字段 #

这里用禁用未勾选字段的方式（表单不会提交disabled状态的字段），比移除name属性更灵活，后续恢复字段也更方便：

// 处理表单提交，仅提交已勾选的字段
$('#myForm').on('submit', function(e) {
  $('.form-group').each(function() {
    const $checkbox = $(this).find('input[type=checkbox]');
    const $field = $(this).find('input[type=text], select');
    
    // 未勾选的字段设置为disabled，不会被提交
    if (!$checkbox.is(':checked')) {
      $field.prop('disabled', true);
    } else {
      $field.prop('disabled', false); // 确保已勾选字段处于可用状态
    }
  });
  
  // 如果是AJAX提交，可以取消默认提交并手动发送数据
  // e.preventDefault();
  // $.post('你的提交地址', $(this).serialize(), function(response) {
  //   // 处理响应逻辑
  // });
});

整合你已有的代码 #

把这些逻辑和你现有的“输入变化勾选复选框”代码合并，完整的jQuery代码如下：

$(document).ready(function() {
  // 输入字段变化时自动勾选对应复选框
  $('.form-group').find('input[type=text], select').on('change', function () { 
    $(this).closest('.form-group').find('input[type=checkbox]').prop('checked', true); 
  });

  // 点击按钮筛选显示已勾选字段
  $('#toggleFieldsBtn').on('click', function() {
    $('.form-group').each(function() {
      const $checkbox = $(this).find('input[type=checkbox]');
      if (!$checkbox.is(':checked')) {
        $(this).hide();
      } else {
        $(this).show();
      }
    });
  });

  // 表单提交仅发送已勾选字段
  $('#myForm').on('submit', function(e) {
    $('.form-group').each(function() {
      const $checkbox = $(this).find('input[type=checkbox]');
      const $field = $(this).find('input[type=text], select');
      if (!$checkbox.is(':checked')) {
        $field.prop('disabled', true);
      } else {
        $field.prop('disabled', false);
      }
    });
  });
});

额外优化建议 #

如果想要实现切换显示/隐藏的功能（比如点击按钮可以重新显示所有字段），可以给按钮加个状态标记，修改点击事件逻辑：

let isFiltered = false;
$('#toggleFieldsBtn').on('click', function() {
  isFiltered = !isFiltered;
  if (isFiltered) {
    // 隐藏未勾选字段
    $('.form-group').each(function() {
      const $checkbox = $(this).find('input[type=checkbox]');
      if (!$checkbox.is(':checked')) $(this).hide();
    });
    $(this).text('显示所有字段');
  } else {
    // 显示所有字段
    $('.form-group').show();
    $(this).text('筛选已填字段');
  }
});

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