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

问题描述：

我需要发送一个非常长的表单，并带有大量复选框。他们按地区分组，如下所示：HTML表单发送未选中的复选框

<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字段作为复选框分组的一部分。

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

答

那么，我猜你已经知道，根本没有办法问浏览器哪些盒子未被打开。怪的HTML形式的发明者......

这里是不破坏你的逻辑分组几个简单的方法：

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

你的第二个建议解决了我的问题。非常感谢你。 – 2013-02-18 21:37:57

答

你可以添加一个隐藏的输入字段，并在表单提交，使用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。

答

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

答

我解决了它。这个想法在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表单发送未选中的复选框

相关推荐