0

我需要发送一个很长的表格，里面有很多复选框。它们按区域分组，如下所示：

<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数组中的所有复选框，这非常方便，但我也需要知道未选中的复选框。我知道隐藏输入技巧，但这对我没有用，因为我使用该value字段作为复选框分组的一部分。

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

4

4 回答 4

3

好吧，我想你已经知道了，基本上没有办法询问浏览器哪些框未被选中。责怪 HTML 表单的发明者...

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

  • 重新生成您在服务器端显示的复选框列表。无论如何，这在很多情况下都是可取的，因为这意味着您不相信返回的数据与您显示的完全相同。（考虑一下如果我使用像 Firebug 这样的调试工具来删除您的一个复选框，或者添加一个新的复选框会发生什么......）
  • 为每个复选框包括具有相应名称的隐藏输入 - “Interests_All”、“Hobbies_All”等 - 这样您就有了两个数据数组，一个只包括选中的项目，一个包括显示的所有内容。
  • 使用单选按钮而不是复选框。是的，它们的显示方式不同，但它们可以具有您想要提交是/否值的功能，而不仅仅是添加或不添加到数组中。
于 2013-02-18T20:25:56.747 回答
0

您可以添加一个隐藏输入字段，并在提交表单时，使用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();
});

见演示。

于 2013-02-18T20:27:07.767 回答
0

我已经解决了。这个想法在 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 端处理列表就很容易了。

于 2013-02-18T21:36:44.763 回答
0

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

于 2013-02-18T20:31:55.653 回答