我有一堆默认选中的复选框。我的用户可能会取消选中一些复选框(如果有的话),并选中其余的复选框。
是否有任何方法使表单POST未选中的复选框,而不是选中的复选框?
我有一堆默认选中的复选框。我的用户可能会取消选中一些复选框(如果有的话),并选中其余的复选框。
是否有任何方法使表单POST未选中的复选框,而不是选中的复选框?
当前回答
我也喜欢这个解决方案,你只是发布一个额外的输入字段,使用JavaScript似乎有点hack对我来说。
取决于你使用什么你的后端将取决于哪个输入先去。
对于使用第一次出现的服务器后端(JSP),您应该执行以下操作。
<input type="checkbox" value="1" name="checkbox_1"/>
<input type="hidden" value="0" name="checkbox_1"/>
对于使用最后一次出现的服务器后端(PHP、Rails),您应该执行以下操作。
<input type="hidden" value="0" name="checkbox_1"/>
<input type="checkbox" value="1" name="checkbox_1"/>
对于服务器后端,其中所有事件都存储在列表数据类型([],数组)中。(Python / Zope)
你可以按照你喜欢的任何顺序发布,你只需要尝试从输入中获得带有复选框类型属性的值。如果复选框在隐藏元素之前,列表的第一个索引如果复选框在隐藏元素之后,列表的最后一个索引。
对于一个服务器后端,所有发生的事件都用逗号连接(ASP。Net / iis) 您需要使用逗号作为分隔符来(拆分/分解)字符串,以创建列表数据类型。([])
现在,如果复选框在隐藏元素之前,您可以尝试获取列表的第一个索引,如果复选框在隐藏元素之后,则可以尝试获取列表的最后一个索引。
图片来源
其他回答
这个解决方案的灵感来自@desw的一个。
如果您的输入名称是“表单样式”的,那么只要选中一个复选框,您就会失去与复选框值的数组索引关联,每次选中一个复选框,这种“分离”就增加一个单元。这可能是用于插入由某些字段组成的雇员的表单的情况,例如:
<input type="text" name="employee[]" />
<input type="hidden" name="isSingle[] value="no" />
<input type="checkbox" name="isSingle[] value="yes" />
如果您一次插入三个员工,并且第一个和第二个员工是单个的,那么您最终将得到一个5元素的isSingle数组,因此您将不能一次遍历三个数组,例如,为了在数据库中插入员工。
你可以用一些简单的数组后处理来克服这个问题。我在服务器端使用PHP,我这样做:
$j = 0;
$areSingles = $_POST['isSingle'];
foreach($areSingles as $isSingle){
if($isSingle=='yes'){
unset($areSingles[$j-1]);
}
$j++;
}
$areSingles = array_values($areSingles);
因此,对于这个问题,这个解决方案是多余的,但当我在一个表的不同行中多次出现相同的复选框时,它帮助了我。我需要知道复选框代表的行,也知道复选框的状态(选中/未选中)。
我所做的是将name属性从复选框输入中删除,将它们全部赋予相同的类,并创建一个隐藏输入,该输入将保存与数据等效的JSON。
HTML
<表id = "权限表" > < tr > < td > <input type="checkbox" class="has-permission-cb" value="Jim"> <input type="checkbox" class="has-permission-cb" value="Bob"> <input type="checkbox" class="has-permission-cb" value="Suzy"> < / td > < / tr > 表> < / <input type="hidden" id="has-permissions-values" name="has-permissions-values" value=""> .
Javascript在表单提交上运行
var perms = {}; $ (" .has-permission-checkbox .each(功能)”(){ var userName = this.value; var val = ($(this).prop("checked")) ?1:0 perms[userName] = {"hasPermission": val}; }); $ (" # has-permissions-values ") (.val JSON.stringify perms));
json字符串将作为$_POST["has-permissions-values"]与表单一起传递。在PHP中,将字符串解码为一个数组,您将得到一个关联数组,其中包含每行和每个对应复选框的true/false值。然后很容易遍历并与当前数据库值进行比较。
这是对之前答案的一种尝试,以自动保留具有特定值(在本例中为0)的未选中复选框,而不会在提交时选中所有复选框。
$("form").submit(function () {
let this_master = $(this);
// Remove any of the hidden values that may already be there (if the user previously canceled the submit)
this_master.find("*[id^='hiddenchkinput_']").remove();
// Get all unchecked checkboxes
this_master.find('input:checkbox:not(:checked)').each(function () {
let thisChk = $(this);
// Create a hidden input with the same name as the checkbox
let newInput = document.createElement('input');
$(newInput).attr('name', thisChk.attr('id'))
.attr('id', 'hiddenchkinput_' + thisChk.attr('id'))
.attr('type', 'hidden')
.val('0');
// Append the new input to the end of the form
this_master.append(newInput);
});
})
直接复制 美元(文档)。On ('change', "input[type=checkbox]", function () { var checkboxVal = (this.checked) ?1: 0; if (checkboxVal== 1) { (美元)。道具(“检查”,真正的); (美元).val(“true”); } 其他{ (美元)。道具(“检查”,假); (美元).val(“false”); } });
一种常见的方法是在每个复选框中附带一个隐藏变量。
<input type="checkbox" name="mycheckbox" />
<input type="hidden" name="mycheckbox.hidden"/>
在服务器端,我们首先检测隐藏变量列表,对于每个隐藏变量,我们尝试查看相应的复选框条目是否提交到表单数据中。
服务器端算法可能是这样的:
for input in form data such that input.name endswith .hidden
checkboxName = input.name.rstrip('.hidden')
if chceckbName is not in form, user has unchecked this checkbox
上面并没有完全回答这个问题,但是提供了一种实现类似功能的替代方法。