我有一堆默认选中的复选框。我的用户可能会取消选中一些复选框(如果有的话),并选中其余的复选框。
是否有任何方法使表单POST未选中的复选框,而不是选中的复选框?
我有一堆默认选中的复选框。我的用户可能会取消选中一些复选框(如果有的话),并选中其余的复选框。
是否有任何方法使表单POST未选中的复选框,而不是选中的复选框?
当前回答
因此,对于这个问题,这个解决方案是多余的,但当我在一个表的不同行中多次出现相同的复选框时,它帮助了我。我需要知道复选框代表的行,也知道复选框的状态(选中/未选中)。
我所做的是将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值。然后很容易遍历并与当前数据库值进行比较。
其他回答
所有答案都很好,但如果您在一个表单中有多个具有相同名称的复选框,并且您希望发布每个复选框的状态。然后我已经解决了这个问题,通过放置一个隐藏字段的复选框(名称相关的我想要的)。
<input type="hidden" class="checkbox_handler" name="is_admin[]" value="0" />
<input type="checkbox" name="is_admin_ck[]" value="1" />
然后用jquery代码控制复选框的变化状态:
$(documen).on("change", "input[type='checkbox']", function() {
var checkbox_val = ( this.checked ) ? 1 : 0;
$(this).siblings('input.checkbox_handler').val(checkbox_val);
});
现在改变任何复选框,它将改变相关隐藏字段的值。在服务器上,你只能看到隐藏字段,而不是复选框。
希望这能帮助到有这种问题的人。快乐:)
@cpburnz说对了,但是代码太多了,下面是使用更少代码的相同想法:
JS:
// jQuery OnLoad
$(function(){
// Listen to input type checkbox on change event
$("input[type=checkbox]").change(function(){
$(this).parent().find('input[type=hidden]').val((this.checked)?1:0);
});
});
HTML(注意字段名使用数组名):
<div>
<input type="checkbox" checked="checked">
<input type="hidden" name="field_name[34]" value="1"/>
</div>
<div>
<input type="checkbox">
<input type="hidden" name="field_name[35]" value="0"/>
</div>
<div>
对于PHP:
<div>
<input type="checkbox"<?=($boolean)?' checked="checked"':''?>>
<input type="hidden" name="field_name[<?=$item_id?>]" value="<?=($boolean)?1:0?>"/>
</div>
我使用这个jQuery块,它将在提交时为每个未选中的复选框添加一个隐藏输入。它将保证您每次都为每个复选框提交一个值,而不会弄乱您的标记,并冒着忘记在稍后添加的复选框上执行此操作的风险。它也与您正在使用的任何后端堆栈(PHP、Ruby等)无关。
// Add an event listener on #form's submit action...
$("#form").submit(
function() {
// For each unchecked checkbox on the form...
$(this).find($("input:checkbox:not(:checked)")).each(
// Create a hidden field with the same name as the checkbox and a value of 0
// You could just as easily use "off", "false", or whatever you want to get
// when the checkbox is empty.
function(index) {
var input = $('<input />');
input.attr('type', 'hidden');
input.attr('name', $(this).attr("name")); // Same name as the checkbox
input.attr('value', "0"); // or 'off', 'false', 'no', whatever
// append it to the form the checkbox is in just as it's being submitted
var form = $(this)[0].form;
$(form).append(input);
} // end function inside each()
); // end each() argument list
return true; // Don't abort the form submit
} // end function inside submit()
); // end submit() argument list
当提交时复选框未选中时,将复选框的值更新为'NO'并设置checked = 'TRUE'
https://jsfiddle.net/pommyk/8d9jLrvo/26/
$(document).ready(function()
{
function save()
{
if (document.getElementById('AgeVerification').checked == false)
{
document.getElementById('AgeVerification').value = 'no';
document.getElementById('AgeVerification').checked = true;
}
}
document.getElementById("submit").onclick = save;
})
可能看起来很傻,但对我很管用。主要缺点是在视觉上是一个单选按钮,而不是一个复选框,但它不需要任何javascript。
HTML
Initialy checked
<span><!-- set the check attribute for the one that represents the initial value-->
<input type="radio" name="a" value="1" checked>
<input type="radio" name="a" value="0">
</span>
<br/>
Initialy unchecked
<span><!-- set the check attribute for the one that represents the initial value-->
<input type="radio" name="b" value="1">
<input type="radio" name="b" value="0" checked>
</span>
和CSS
span input
{position: absolute; opacity: 0.99}
span input:checked
{z-index: -10;}
span input[value="0"]
{opacity: 0;}
小提琴在这里
我想听到你在这段代码中发现的任何问题,因为我在生产中使用它