过账未检查的HTML复选框

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

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

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

我通过使用香草JavaScript解决了这个问题:

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

你可以用 this.previousSibling.previousSibling

我个人最喜欢的是添加一个与复选框未选中时使用的名称相同的隐藏字段。但解决办法并不像看上去那么容易。

如果添加此代码:

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

例如,PHP将最后一个值作为要使用的值(请参见: Authoritative position of duplicate HTTP GET query keys )

NET将为您提供一个包含两个元素的数组

我将尝试在某个时候使用node.js、Python和Perl来测试这一点。

您不需要为所有复选框创建隐藏字段,只需复制我的代码即可。 如果未选中复选框,它将更改复选框的值 value 0 如果选中复选框,则分配 价值 进入 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" 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

上述内容并不能完全回答这个问题,但提供了实现类似功能的替代方法。

$('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>

仅测试复选框数组。

您可以在表单的提交事件中执行一些Javascript。这就是你所能做的,没有办法让浏览器自己做到这一点。这还意味着,对于没有Javascript的用户,表单将中断。 $_POST 在PHP中)未选中。

我知道这个问题已经问了3年了,但我找到了一个我认为效果不错的解决方案。

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

函数的作用是:检查$u POST变量是否已赋值。根据逻辑,如果未分配,则不选中复选框。

我实际上会做下面的事情。

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

然后,当我发布时,我首先删除$\u post数组中拾取的重复值,即显示每个唯一值的atfer。

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

remove duplicate values from array

“我采用了服务器的方式。似乎工作得很好-谢谢。2009年12月1日15:19到达4台直升机。”我想向车主推荐。引用:javascript解决方案取决于服务器处理程序的方式(我没有检查)

比如

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

我相信解决这个常见问题的关键是表单的提交输入控件。

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

1. 复选框的名称

通过检查表单是否已提交(为提交输入元素指定了一个值),可以删除任何未选中的复选框值 假定

例如:

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

?>

初始数据可以在每次页面加载时加载,但只有在提交表单时才应进行修改。由于复选框的名称是预先知道的,因此可以单独遍历和检查复选框,因此如果没有其单独的值,则表示未选中复选框。

我也喜欢这样的解决方案,你只需发布一个额外的输入字段,使用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)

checkbox

对于所有事件都用逗号连接的服务器后端(ASP.NET/IIS) []

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

image source

好主意,但它会导致表单中有多个同名元素。如果您使用任何基于名称查找元素的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]);
}

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

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

我知道这个问题很老了,有很多答案,但我还是会给我一分钱的。

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

这样,您将拥有一个如下所示的$\u POST数组:

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

我做的有点不同。首先,我更改了所有未选中复选框的值。设置为“0”,然后将其全部选中,以便提交值。

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

我更喜欢整理美元的邮件

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

如果帖子没有“checkboxname”值,那么它是未加密的,因此需要指定一个值。

Ajax操作的示例是(“:checked”)使用jQuery而不是.val();

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

params将获取TRUE或FALSE中的值。。

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

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

注意:空格或新行也是同级,所以这里我需要.previousSibling.previousSibling.value。如果两者之间没有空格,则仅.previousSibling.value

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

@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>

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

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

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

希望这将帮助有这种问题的人。欢呼:)

您可以在提交表单之前添加隐藏元素。

$('form').submit(function() {
  $(this).find('input[type=checkbox]').each(function (i, el) {
    if(!el.checked) {
      var hidden_el = $(el).clone();
      hidden_el[0].checked = true;
      hidden_el[0].value = '0';
      hidden_el[0].type = 'hidden'
      hidden_el.insertAfter($(el));
    }
  })
});

复选框的问题是,如果未选中复选框,则它们不会与表单一起发布。如果选中复选框并发布表单,您将在$\u post变量中获得复选框的值,您可以使用该值处理表单,如果未选中,则不会向$\u post变量添加任何值。

在PHP中,通常通过对checkbox元素执行isset()检查来解决这个问题。如果您期望的元素没有在$\u POST变量中设置,那么我们知道复选框没有被选中,并且该值可能为false。

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

但是,如果您创建了一个动态表单,那么您并不总是知道复选框的name属性,如果您不知道复选框的名称,那么您就不能使用isset函数来检查此表单是否已与$\u 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);">

如果要提交复选框值数组(包括未选中的项),可以尝试以下操作:

<form>
<input type="hidden" value="0" name="your_checkbox_array[]"><input type="checkbox">Dog
<input type="hidden" value="0" name="your_checkbox_array[]"><input type="checkbox">Cat
</form>

$('form').submit(function(){
    $('input[type="checkbox"]:checked').prev().val(1);
});

如果在提交时未选中该复选框,请将复选框值更新为“否”,并将“选中”设置为“真”

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

对于复选框,在不使用隐藏类型值的情况下执行此操作的简单方法是:

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

在PHP中,对于发布的表单数据,请执行以下操作:

// Sanitize form POST data
$post = filter_var_array($_POST, FILTER_SANITIZE_STRING);

// set the default checkbox value
$selfDestruct = '0';
if(isset($post["selfdestruct"]))
    $selfDestruct = $post["selfdestruct"];