后未经检查的框HTML

https://stackoverflow.com/questions/1809494

05-07-2019
|

题

我有一个载荷的框检查的默认。我的用户可能会取消一些(如果有任何)的选择框并把剩下的检查。

是否有任何方式编的形式发布选择框，不检查，而不是那些都检查？

解决方案

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

我使用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（设置）。

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

如果您添加此代码：

<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

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

您不需要为所有复选框创建隐藏字段，只需复制我的代码即可。如果未选中，它将更改复选框的值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');
        }
    })
})

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

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

我实际上将做以下。

有我的隐藏的输入域名称相同的框输入

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

然后当我后我首先删除重复的价值在$_POST阵列，atfer，显示每个独特的价值观。

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

我得到了这后删除重复的数值从阵列

<！>“我已经采用了服务器方法。似乎工作正常 - 谢谢。 <！> 8211＃;到2009年12月1日15:19 <！>我想从店主那里推荐它。引用：javascript解决方案取决于服务器处理程序（我没有检查）

，例如

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

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

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

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

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

通过检查表单是否已提交（将值分配给提交输入元素），可以假设。。

例如：

<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的想法，它对我有用。这是我的代码：

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

我也喜欢你刚发布一个额外的输入字段的解决方案，使用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 type属性从输入中获取值。因此，如果复选框位于隐藏元素之前，则列表的第一个索引;如果复选框位于隐藏元素之后，则为最后一个索引。

，点击对于服务器后端，其中所有实例都以逗号连接（ASP.NET / IIS）您需要使用逗号作为分隔符（分割/爆炸）来创建列表数据类型。（<=>）

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

图片来源

我看到这个问题很老，答案很多，但无论如何我都会给我一分钱。我的投票是针对表单'submit'事件中的javascript解决方案，正如一些人所指出的那样。没有加倍的输入（特别是如果你有长的名字和属性与PHP代码与html混合），没有服务器端麻烦（这将需要知道所有字段名称并逐个检查它们），只需获取所有未检查的项目，为它们分配一个0值（或任何你需要表示'未检查'的状态），然后将它们的属性'checked'更改为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);
        }
    })
});

我知道这个问题已经有3年了，但我找到了一个我觉得很有效的解决方案。

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

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

isset（）函数检查是否分配了$ _POST变量。如果没有分配逻辑，那么不选中复选框。

我做的有点不同。首先，我更改了所有未选中复选框的值。要<！>“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'值，那么它就是unckecked所以，设置一个值。

你可以创建一个ckeckbox值的数组，并创建一个函数来检查值是否存在，如果没有，它会介意未经检查，你可以设置一个值

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

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

params将获得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 <！>;值为'Y'或未收到复选框为'N'。

注意：空格或新行也是兄弟，所以我需要.previousSibling.previousSibling.value。如果之间只有.previousSibling.value

之间没有空格

您不需要像以前那样显式添加onclick侦听器，您可以使用jQuery库动态添加具有函数的单击侦听器，以将值更改为页面中的所有复选框：

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

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

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

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

但是如果你已经创建了一个动态表单，那么你不会总是知道你的复选框的name属性，如果你不知道复选框的名称那么你就不能使用isset函数来检查它是否有已使用$ _POST变量发送。

这可以通过一些javascript完成，因为未经检查的复选框不会被传输。所以你需要javascript，例如幕后添加隐藏字段取消选中复选框。没有javascript就无法完成。

有一个更好的解决方法。首先，只为选中的复选框提供name属性。然后单击submit，通过JavaScript function检查所有未选中的复选框。因此，当您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>

@ vishnu答案的jQuery版本。

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

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

这个解决方案的灵感来自@ desw的一个。

如果您的输入名称是<！>“;形式样式<！>”;，一旦选中了一个chekbox，您将失去与chekbox值的数组索引关联，并递增此<！> quot; dissociation <！ > QUOT;每次检查chekbox时一个单位。这可以是用于插入由某些字段组成的员工之类的表单的情况，例如：

<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 [<！> quot; has-permissions-values <！> quot;]的形式传递。在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);
});

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

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

许可以下： CC-BY-SA 和归因

不隶属于 StackOverflow