POST未选中的HTML复选框

我有一堆默认情况下处于选中状态的复选框。我的用户可能会取消选中其中一些复选框（如果有），而其余复选框保持选中状态。

有没有什么办法让表单POST所复选框不检查，而不是的那些被选中？

为具有不同ID的复选框添加隐藏的输入：

<input id='testName' type='checkbox' value='Yes' name='testName'>
<input id='testNameHidden' type='hidden' value='No' name='testName'>

提交表单之前，请根据检查的条件禁用隐藏的输入：

if(document.getElementById("testName").checked) {
    document.getElementById('testNameHidden').disabled = true;
}

到目前为止，我最喜欢的解决方案是将一个隐藏的输入与可能未选中的复选框同名。我认为它的工作原理是，如果未选中此复选框，则隐藏的输入仍会成功发送到服务器，但是如果选中此复选框，它将覆盖之前的隐藏输入。这样，您不必跟踪发布的数据中哪些值应该来自复选框。

<form>
  <input type='hidden' value='0' name='selfdestruct'>
  <input type='checkbox' value='1' name='selfdestruct'>
</form>

我使用香草JavaScript解决了它：

<input type="hidden" name="checkboxName" value="0"><input type="checkbox" onclick="this.previousSibling.value=1-this.previousSibling.value">

请注意，这两个输入元素之间不要有任何空格或换行符！

您可以this.previousSibling.previousSibling用来获取“上部”元素。

使用PHP，您可以检查命名隐藏字段的0（未设置）或1（设置）。

我个人最喜欢的是添加一个与未选中复选框时将使用的名称相同的隐藏字段。但是解决方案并不像看起来那样容易。

如果添加此代码：

<form>
  <input type='hidden' value='0' name='selfdestruct'>
  <input type='checkbox' value='1' name='selfdestruct'>
</form>

浏览器不会真正在乎您在这里做什么。浏览器会将这两个参数都发送到服务器，服务器必须决定如何处理它们。

例如，PHP将最后一个值用作要使用的值（请参阅：重复的HTTP GET查询键的权威位置）

但是，我使用过的其他系统（基于Java）却可以做到这一点-它们只为您提供第一价值。.NET相反会给您同时包含两个元素的数组

我将尝试在某个时候使用node.js，Python和Perl对此进行测试。

解决此问题的常用技术是随每个复选框一起携带一个隐藏变量。

<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

上面的方法并不能完全回答问题，但是提供了实现类似功能的另一种方法。

您无需为所有复选框创建隐藏字段，只需复制我的代码即可。如果未选中，它将更改checkbox的值，value将分配0；如果选中checkbox，则将其赋值value到1

$("form").submit(function () {

    var this_master = $(this);

    this_master.find('input[type="checkbox"]').each( function () {
        var checkbox_this = $(this);


        if( checkbox_this.is(":checked") == true ) {
            checkbox_this.attr('value','1');
        } else {
            checkbox_this.prop('checked',true);
            //DONT' ITS JUST CHECK THE CHECKBOX TO SUBMIT FORM DATA    
            checkbox_this.attr('value','0');
        }
    })
})

$('input[type=checkbox]').on("change",function(){
    var target = $(this).parent().find('input[type=hidden]').val();
    if(target == 0)
    {
        target = 1;
    }
    else
    {
        target = 0;
    }
    $(this).parent().find('input[type=hidden]').val(target);
});

<p>
    <input type="checkbox" />
    <input type="hidden" name="test_checkbox[]" value="0" />
</p>
<p>
    <input type="checkbox" />
    <input type="hidden" name="test_checkbox[]" value="0" />
</p>
<p>
    <input type="checkbox" />
    <input type="hidden" name="test_checkbox[]" value="0" />
</p>

如果忽略了复选框的名称，则不会传递该复选框的名称。仅test_checkbox数组。

您可以在表单的Submit事件中使用一些Javascript。这就是您所能做的，没有办法让浏览器自己执行此操作。这也意味着您的表单将对没有Javascript的用户破坏。最好是在服务器上知道有哪些复选框，因此可以推断出$_POST未选中发布表单值（在PHP中）中没有的那些复选框。

我实际上将执行以下操作。

使我的隐藏输入字段与复选​​框输入同名

<input type="hidden" name="checkbox_name[]" value="0" />
<input type="checkbox" name="checkbox_name[]" value="1" />

然后当我发布时，我首先删除在$ _POST数组中拾取的重复值，推断显示每个​​唯一值。

  $posted = array_unique($_POST['checkbox_name']);
  foreach($posted as $value){
    print $value;
  }

我从帖子中得到了这个，从数组中删除重复的值

“我已经采用了服务器方法。似乎工作得很好-谢谢。–reach4thelasers，09年1月1日，15：19。”我想向业主推荐。如所引用：javascript解决方案取决于服务器处理程序的方式（我没有对其进行检查）

如

if(!isset($_POST["checkbox"]) or empty($_POST["checkbox"])) $_POST["checkbox"]="something";

我知道这个问题已有3年历史了，但是我找到了一个我认为效果很好的解决方案。

您可以检查$ _POST变量是否已分配，并将其保存在变量中。

$value = isset($_POST['checkboxname'] ? 'YES' : 'NO';

isset（）函数检查是否已分配$ _POST变量。按照逻辑，如果未分配该复选框，则不会选中该复选框。

这里的大多数答案都需要使用JavaScript或重复的输入控件。有时，这需要在服务器端完全处理。

我认为解决此常见问题的（预期）关键是表单的提交输入控件。

要成功解释和处理复选框的未选中值，您需要了解以下内容：

1. 复选框名称
2. 表单的提交输入元素的名称

通过检查表单是否已提交（将值分配给了提交输入元素），可以假定所有未选中的复选框值。

例如：

<form name="form" method="post">
  <input name="value1" type="checkbox" value="1">Checkbox One<br/>
  <input name="value2" type="checkbox" value="1" checked="checked">Checkbox Two<br/>
  <input name="value3" type="checkbox" value="1">Checkbox Three<br/>
  <input name="submit" type="submit" value="Submit">
</form>

使用PHP时，检测哪些复选框已被勾选非常简单。

<?php

$checkboxNames = array('value1', 'value2', 'value3');

// Persisted (previous) checkbox state may be loaded 
// from storage, such as the user's session or a database.
$checkboxesThatAreChecked = array(); 

// Only process if the form was actually submitted.
// This provides an opportunity to update the user's 
// session data, or to persist the new state of the data.

if (!empty($_POST['submit'])) {
    foreach ($checkboxNames as $checkboxName) {
        if (!empty($_POST[$checkboxName])) {
            $checkboxesThatAreChecked[] = $checkboxName;
        }
    }
    // The new state of the checkboxes can be persisted 
    // in session or database by inspecting the values 
    // in $checkboxesThatAreChecked.
    print_r($checkboxesThatAreChecked);
}

?>

可以在每次页面加载时加载初始数据，但是只有在提交表单后才可以修改初始数据。由于复选框的名称是事先已知的，因此可以单独遍历和检查复选框的名称，因此，如果缺少其各个值，则表示未选中它们。

我先尝试了Sam的版本。好主意，但它会导致表单中有多个具有相同名称的元素。如果您使用任何基于名称查找元素的javascript，它现在将返回元素数组。

我已经用PHP解决了Shailesh的想法，它对我有用。这是我的代码：

/ *如果原始文件存在，请删除“ .hidden”字段，否则请使用“ .hidden”值。* /
foreach（$ _POST ['frmmain'] as $ field_name => $ value）
{
    //仅查看以'.hidden'结尾的元素
    如果（！substr（$ field_name，-strlen（'。hidden'）））{
        打破;
    }

    //获得不带“ .hidden”的名称
    $ real_name = substr（$ key，strlen（$ field_name）-strlen（'。hidden'））;

    //如果原始不存在，则使用'.hidden'中的值创建一个'fake'原始字段
    如果（！array_key_exists（$ real_name，$ POST_copy））{
        $ _POST [$ real_name] = $ value;
    }

    //删除'.hidden'元素
    取消设置（$ _POST [$ field_name]）;
}

我还喜欢这样的解决方案，即您只发布了一个额外的输入字段，对我来说，使用JavaScript似乎有点不客气。

取决于您使用的后端，将取决于首先输入的内容。

对于使用第一次出现的服务器后端（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"/>

对于其中所有出现被存储在列表中的数据类型的服务器的后端（[]，array）。（Python / Zope）

您可以按照自己喜欢的顺序发布信息，只需要尝试从具有checkboxtype属性的输入中获取值即可。因此，如果复选框在隐藏元素之前，则列表的第一个索引；如果复选框在隐藏元素之后，则最后一个索引。

对于所有出现的事件都用逗号连接的服务器后端（ASP.NET / IIS），您将需要使用逗号作为分隔符来创建（列表/拆分）字符串，以创建列表数据类型。（[]）

现在，如果复选框在隐藏元素之前，则可以尝试获取列表的第一个索引；如果复选框在隐藏元素之后，则可以获取列表的最后一个索引。

图片来源

我使用此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

您还可以拦截form.submit事件并在提交之前进行反向检查

$('form').submit(function(event){
    $('input[type=checkbox]').prop('checked', function(index, value){
        return !value;
    });
});

我看到这个问题很旧并且有很多答案，但是我还是会给我一分钱。正如一些人指出的那样，我的投票是针对表单的“提交”事件的javascript解决方案。无需将输入加倍（特别是如果您的名称和属性很长，并且php代码与html混合在一起），服务器端也不需要打扰（这需要了解所有字段名并一一检查下来），只需获取所有未选中的项，为其分配一个0值（或需要指示“未选中”状态的任何内容），然后将其“已选中”属性更改为true

    $('form').submit(function(e){
    var b = $("input:checkbox:not(:checked)");
    $(b).each(function () {
        $(this).val(0); //Set whatever value you need for 'not checked'
        $(this).attr("checked", true);
    });
    return true;
});

这样，您将拥有一个$ _POST数组，如下所示：

Array
(
            [field1] => 1
            [field2] => 0
)

$('form').submit(function () {
    $(this).find('input[type="checkbox"]').each( function () {
        var checkbox = $(this);
        if( checkbox.is(':checked')) {
            checkbox.attr('value','1');
        } else {
            checkbox.after().append(checkbox.clone().attr({type:'hidden', value:0}));
            checkbox.prop('disabled', true);
        }
    })
});

我所做的有些不同。首先，我更改了所有未选中复选框的值。设为“ 0”，然后全部选中，因此将提交该值。

function checkboxvalues(){
  $("#checkbox-container input:checkbox").each(function({ 
    if($(this).prop("checked")!=true){
      $(this).val("0");
      $(this).prop("checked", true);
    }
  });
}

我希望整理$ _POST

if (!$_POST['checkboxname']) !$_POST['checkboxname'] = 0;

介意的是，如果POST没有'checkboxname'值，则该值会被取消标记，因此请分配一个值。

您可以创建一个由ckeckbox值组成的数组，并创建一个函数来检查值是否存在，如果不存在，则介意未选中，您可以分配一个值

Ajax操作的示例是（'：checked'）使用jQuery而不是.val（）;。

            var params = {
                books: $('input#users').is(':checked'),
                news : $('input#news').is(':checked'),
                magazine : $('input#magazine').is(':checked')
            };

参数将以TRUE或FALSE获得值。

复选框通常代表以“是/否”，“ Y / N”或“ 1/0”值存储在数据库中的二进制数据。HTML复选框的确具有不好的性质，仅当选中该复选框时才能将值发送到服务器！这意味着其他站点上的服务器脚本必须事先知道网页上所有可能的复选框，以便能够存储正（选中）或负（未选中）值。实际上，只有负值才是问题（当用户取消选中先前（预先）检查的值时，如果事先不知道应发送此名称，则服务器在什么都不发送时如何知道这一点）。如果您有一个动态创建UPDATE脚本的服务器端脚本，则会出现问题，因为您不知道应该接收什么所有复选框才能将Y值设置为选中状态，将N值设置为未选中（未接收到）复选框。

由于我将值“ Y”和“ N”存储在数据库中，并通过页面上已选中和未选中的复选框来表示它们，因此我为每个值（复选框）添加了“ Y”和“ N”值的隐藏字段，然后仅将复选框用于可视化表示形式，并使用简单的JavaScript函数check（）根据选择设置if的值。

<input type="hidden" id="N1" name="N1" value="Y" />
<input type="checkbox"<?php if($N1==='Y') echo ' checked="checked"'; ?> onclick="check(this);" />
<label for="N1">Checkbox #1</label>

对我网页上的每个复选框使用一个JavaScript onclick侦听器并调用函数check（）：

function check(me)
{
  if(me.checked)
  {
    me.previousSibling.previousSibling.value='Y';
  }
  else
  {
    me.previousSibling.previousSibling.value='N';
  }
}

这样，始终将“ Y”或“ N”值发送到服务器端脚本，它知道应该更新哪些字段，并且不需要将checbox的“ on”值转换为“ Y”或将未收到的复选框转换为“ N” '。

注意：空格或换行符也是同级，所以在这里我需要.previousSibling.previousSibling.value。如果之间没有空格，则仅.previousSibling.value

您不需要像以前一样显式添加onclick侦听器，可以使用jQuery库动态添加具有功能的click侦听器，以更改页面中所有复选框的值：

$('input[type=checkbox]').click(function()
{
  if(this.checked)
  {
    $(this).prev().val('Y');
  }
  else
  {
    $(this).prev().val('N');
  }
});

所有答案都很好，但是如果您在表单中有多个具有相同名称的复选框，并且希望发布每个复选框的状态。然后我通过将一个隐藏字段与复选​​框（名称与我想要的名称相关）放置来解决了这个问题。

<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);
});

现在，如果更改任何复选框，它将更改相关隐藏字段的值。在服务器上，您只能查看隐藏的字段，而不能查看复选框。

希望这可以帮助某人遇到此类问题。欢呼：）

复选框的问题在于，如果未选中它们，则它们不会与您的表单一起发布。如果选中复选框并发布表单，则将在$ _POST变量中获取复选框的值，可用于处理表单；如果未选中，则不会将任何值添加到$ _POST变量中。

在PHP中，通常可以通过对复选框元素执行isset（）检查来解决此问题。如果您期望的元素未在$ _POST变量中设置，那么我们知道未选中该复选框，并且该值可以为false。

if(!isset($_POST['checkbox1']))
{
     $checkboxValue = false;
} else {
     $checkboxValue = $_POST['checkbox1'];
}

但是，如果您创建了动态表单，那么您将不会总是知道复选框的名称属性，如果您不知道复选框的名称，那么您将无法使用isset函数来检查是否已将其发送给$ _POST变量。

function SubmitCheckBox(obj) {
     obj.value   = obj.checked ? "on" : "off";
     obj.checked = true;
     return obj.form.submit();
}

<input type=checkbox name="foo" onChange="return SubmitCheckBox(this);">

有一个更好的解决方法。首先，仅向选中的那些复选框提供名称属性。然后单击submit，通过JavaScript function选中所有未选中的框。因此，当您submit只有那些将在form collection拥有name财产的人中被检索到时。

  //removing name attribute from all checked checkboxes
                  var a = $('input:checkbox:checked');
                   $(a).each(function () {
                       $(this).removeAttr("name");        
                   });

   // checking all unchecked checkboxes
                   var b = $("input:checkbox:not(:checked)");
                   $(b).each(function () {
                       $(this).attr("checked", true);
                   });

优点： 无需创建额外的隐藏框并进行操作。

@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版本的@vishnu的答案。

if($('#testName').is(":checked")){
    $('#testNameHidden').prop('disabled', true);
}

如果您使用的是jQuery 1.5或更低版本，请使用.attr（）函数而不是.prop（）

此解决方案的灵感来自@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

 <table id="permissions-table">
    <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>
 </table>
 <input type="hidden" id="has-permissions-values" name="has-permissions-values" value="">

在表单提交上运行的Javascript

var perms = {};
$(".has-permission-checkbox").each(function(){
  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值。这样很容易遍历并与当前数据库值进行比较。