POST未经检查的HTML复选框

Question

我有一大堆默认选中的复选框.我的用户可能会取消选中一些(如果有的话)复选框,然后选中其余部分.

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

Answer 1

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

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

Answer 2

为具有不同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;
}

Answer 3

我使用vanilla 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(设置).

Answer 4

我个人最喜欢的是添加一个隐藏字段,如果取消选中该复选框,将使用相同的名称.但解决方案并不像看起来那么容易.

如果您添加此代码:

<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进行测试.

Answer 5

围绕这个的常见技术是携带隐藏变量以及每个复选框.

<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

以上并没有完全回答这个问题,但提供了一种实现类似功能的替代方法.

Answer 6

您不需要为所有复选框创建隐藏字段只需复制我的代码.它将更改复选框的值,如果未选中value将分配0,如果选中复选框,则分配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');
        }
    })
})

Answer 7

你可以在表单的提交事件中做一些Javascript.这就是你所能做的一切,没有办法让浏览器自己做到这一点.这也意味着您的表单将在没有Javascript的情况下中断.更好的是在服务器上知道哪些复选框,因此您可以推断出未发布的已发布表单值($_POST在PHP中)不存在.

Answer 8

$('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数组.

Answer 9

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

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

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

isset() 函数检查是否分配了 $_POST 变量。根据逻辑，如果未分配，则不会选中复选框。

Answer 10

我实际上会做以下事情.

使用复选框输入使我的隐藏输入字段具有相同的名称

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

我从一个帖子中删除了从数组中删除重复值

Answer 11

"我已经采用了服务器方法.似乎工作得很好 - 谢谢.--到2009年12月1日15:19到达4,我想向业主推荐它." 引用:javascript解决方案取决于服务器处理程序(我没有检查)

如

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

Answer 12

这里的大多数答案都需要使用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);
}

?>

可以在每个页面加载时加载初始数据,但只有在提交表单时才应修改.由于复选框的名称是事先已知的,因此可以单独遍历和检查它们,因此缺少各自的值表示它们未被检查.

Answer 13

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

我用PHP编写了Shailesh的想法,它对我有用.这是我的代码:

/* Delete '.hidden' fields if the original is present, use '.hidden' value if not. */
foreach ($_POST['frmmain'] as $field_name => $value)
{
    // Only look at elements ending with '.hidden'
    if ( !substr($field_name, -strlen('.hidden')) ) {
        break;
    }

    // get the name without '.hidden'
    $real_name = substr($key, strlen($field_name) - strlen('.hidden'));

    // Create a 'fake' original field with the value in '.hidden' if an original does not exist
    if ( !array_key_exists( $real_name, $POST_copy ) ) {
        $_POST[$real_name] = $value;
    }

    // Delete the '.hidden' element
    unset($_POST[$field_name]);
}

Answer 14

我也喜欢你刚发布一个额外的输入字段的解决方案,使用JavaScript对我来说似乎有点hacky.

根据您使用的后端,后端取决于首先输入的内容.

对于使用第一次出现的服务器后端(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)您将需要(分割/爆炸)字符串,方法是使用逗号作为分隔符来创建列表数据类型.([])

现在,如果复选框位于隐藏元素之前,您可以尝试获取列表的第一个索引,如果复选框位于隐藏元素之后,则可以获取最后一个索引.

图像源

Answer 15

我使用这个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

Answer 16

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

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

Answer 17

$('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);
        }
    })
});