Question

我需要发送一个包含大量复选框的非常长的表单。它们按区域分组，如下所示：

<fieldset>
    <legend>Whatever1</legend>
    <div class="checkbox-list">
        <label class="checkbox inline"><input type="checkbox" name="Hobbies" value="Arts"> Arts</label>
        <label class="checkbox inline"><input type="checkbox" name="Hobbies" value="Bars"> Bars</label>
        <label class="checkbox inline"><input type="checkbox" name="Hobbies" value="Books"> Books</label>
        (more items)
    </div>
</fieldset>
<fieldset>
    <legend>Whatever2</legend>
    <div class="checkbox-list">
        <label class="checkbox inline"><input type="checkbox" name="Interests" value="Architecture"> Architecture</label>
        <label class="checkbox inline"><input type="checkbox" name="Interests" value="Audio"> Audio/vídeo</label>
        <label class="checkbox inline"><input type="checkbox" name="Interests" value="Business"> Business</label>
        (more items)            
    </div>
</fieldset>

表单更长，但你明白了。

使用name="Hobbies" value="Arts"我的django后端接收分组在Hobbies数组中的所有复选框，这非常方便，但我也需要知道未选中的复选框。我知道hidden input trick，但它对我没用，因为我使用value字段作为复选框分组的一部分。

关于我能做什么的任何想法？

Answer 1

好吧，正如我猜您已经知道的那样，从根本上没有办法向浏览器询问哪些盒子未被攻击。责怪HTML表单的发明者......

以下是一些不会破坏分组逻辑的简单方法：

重新生成您在服务器端显示的复选框列表。无论如何，这在很多情况下都是优选的，因为这意味着你不相信回来的数据正是你所展示的。（如果我使用像Firebug这样的调试工具来删除你的一个复选框，或者添加一个新复选框，会发生什么情况......）
包含每个复选框的对应名称的隐藏输入 - “Interests_All”，“Hobbies_All”等 - 这样您就有两个数据阵列，一个包括已检查的项目，一个包括所有内容显示。
使用单选按钮代替复选框。是的，它们的显示方式不同，但它们可以具有您想要提交“是/否”值的功能，而不仅仅是添加到数组中。

Answer 2

您可以添加隐藏的输入字段，并在表单提交时使用jQuery使用包含未选中复选框值的数组填充隐藏输入的值：

$("form").on("submit", function(e) {
  e.preventDefault();

  // Create an array of unchecked Hobbies
  var uncheckedValues = [];
  $(this).find("input[name='Hobbies']:not(:checked)").each(function() {
    uncheckedValues.push(this.value);
  });

  // Set the uncheckedValues array as hidden input value
  $("#your-hidden-input").val(uncheckedValues);
  alert($("#your-hidden-input").val());

  // Handle the form submission
  handleFormSubmit();
});

请参阅DEMO。

Answer 3

如何为后端中的每个复选框设置默认的false值。如果浏览器已经传递了值，则可以将值更改为true。

Answer 4

我已经解决了。这个想法是在IMSoP的回答中。这是我的解决方案，也许它可以帮助某人：

<fieldset>
    <legend>Whatever1</legend>
    <div class="checkbox-list">
        <input type="hidden" name="Hobbies_Arts">
        <label class="checkbox inline"><input type="checkbox" name="Hobbies" value="Arts"> Arts</label>
        <input type="hidden" name="Hobbies_Bars">
        <label class="checkbox inline"><input type="checkbox" name="Hobbies" value="Bars"> Bars</label>
        <input type="hidden" name="Hobbies_Books">
        <label class="checkbox inline"><input type="checkbox" name="Hobbies" value="Books"> Books</label>
        (more items)
    </div>
</fieldset>

有了这个，很容易处理django方面的列表。

HTML表单发送未选中的复选框

4 个答案: