无JS实现：复选框控制textarea内容是否随表单提交

首先得说清楚：纯HTML没有原生方式能严格实现「未勾选复选框时，textarea内容完全不被提交」的需求，但我们可以用CSS做一个接近的方案，适合普通使用场景；如果需要绝对严格的控制，还是得用一点点JavaScript（代码非常简单）。

纯CSS+HTML的近似方案（适合普通场景） #

这个方案的思路是：只有当复选框被勾选时，才让textarea显示出来。这样用户只有在勾选后才能输入内容，未勾选时textarea隐藏且无输入，提交时自然不会有内容被发送。

代码示例：

<form method="post" action="" id="submitform">
  <fieldset>
    <legend>Your Preferences</legend>
    <input type="checkbox" id="urban" name="pref" value="urban">
    <label for="urban">Include Urban Area Details</label>
    
    <!-- 默认隐藏textarea，勾选后显示 -->
    <textarea name="urban_details" id="urban_details" rows="4" cols="50" style="display: none; margin-top: 8px;"></textarea>
  </fieldset>
  <button type="submit" style="margin-top: 12px;">Submit Form</button>
</form>

<style>
  /* 利用CSS相邻兄弟选择器，勾选复选框后显示textarea */
  #urban:checked ~ #urban_details {
    display: block;
  }
</style>

这个方案的局限性：如果用户通过浏览器开发者工具手动显示textarea并输入内容，然后不勾选复选框提交，内容还是会被发送。但对于正常使用的用户来说，完全能满足需求。

严格控制的JavaScript方案（如果需要绝对可靠） #

如果要确保「无论用户怎么操作，未勾选时textarea内容都不被提交」，就得用一点点JS来动态控制textarea的name属性——因为表单只会提交带有name属性的元素。

代码示例：

<form method="post" action="" id="submitform">
  <fieldset>
    <legend>Your Preferences</legend>
    <input type="checkbox" id="urban" name="pref" value="urban">
    <label for="urban">Include Urban Area Details</label>
    <textarea name="urban_details" id="urban_details" rows="4" cols="50" style="margin-top: 8px;"></textarea>
  </fieldset>
  <button type="submit" style="margin-top: 12px;">Submit Form</button>
</form>

<script>
  const form = document.getElementById('submitform');
  const checkbox = document.getElementById('urban');
  const textarea = document.getElementById('urban_details');

  // 表单提交前检查复选框状态
  form.addEventListener('submit', function(e) {
    if (!checkbox.checked) {
      // 移除name属性，这样表单不会提交这个textarea
      textarea.removeAttribute('name');
    } else {
      // 确保name属性存在，正常提交内容
      textarea.setAttribute('name', 'urban_details');
    }
  });
</script>

这个方案完全符合你的需求：勾选时发送textarea内容，未勾选时完全不发送，不管用户怎么操作都可靠。

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