POST未选中的HTML复选框

一种常见的方法是在每个复选框中附带一个隐藏变量。

<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

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

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

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

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

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

如果你添加以下代码:

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

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

例如，PHP将最后一个值作为要使用的值(参见:重复的HTTP GET查询键的权威位置)

我会试着在某个时候用node.js, Python和Perl测试这个。

简单的答案。如果您的代码中有检查= "检查"，则将其更改为不= "不"

所以你的文本应该是这样的:

Input type="checkbox" name="yourchosenname" unchecked="unchecked" < / >强

  //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说对了，但是代码太多了，下面是使用更少代码的相同想法:

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

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

超文本标记语言

 <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值。然后很容易遍历并与当前数据库值进行比较。

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


?>

初始数据可以在每个页面加载时加载，但只有在提交表单时才应该修改。由于预先知道复选框的名称，因此可以逐个遍历和检查它们，因此它们的单独值的缺失表明它们没有被选中。

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

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

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

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

我更喜欢整理$_POST

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

它介意，如果POST没有checkboxname值，它是unchecked的，所以，给它赋一个值。

你可以为你的复选框值创建一个数组，并创建一个函数来检查值是否存在，如果不存在，它会介意是否未选中，你可以给值赋值

我更喜欢不需要javascript的解决方案(是的，我知道现在会有一些人把我归为勒德分子)，但如果你像我一样，你想要能够显示复选框的默认/初始设置，然后让它保持或更新基于提交的表单，试试这个(建立在上面的几个想法上):

设置确定初始复选框状态的变量，然后使用服务器检查确定每次提交表单后的显示。

下面的例子创建了一个数组的数组(用于WordPress;同样适用于其他地方)，然后使用服务器脚本确定复选框的状态，而不使用隐藏字段或javascript。

<?php


$options_array = array (
array('list_companies_shortcode' , 'shortcode_list_companies' , 'List Companies Shortcode'),
array('list_contacts_shortcode' , 'shortcode_list_contacts' , 'List Contacts Shortcode'),
array('test_checkbox_1' , 'checked' , 'Label for Checkbox 1' , 'checkbox' , 'Some text to instruct the user on this checkbox use' ),
array('test_checkbox_2' , '' , 'Label for Checkbox 2' , 'checkbox' , 'Some other text to instruct the user on this checkbox use' )
) ;




$name_value_array = array() ;
$name_label_array = array() ;
$field_type_array = array() ;
$field_descriptor_array = array() ;
foreach ( $options_array as $option_entry ) {
$name_value_array[ $option_entry[0] ] = $option_entry[1] ;
$name_label_array[ $option_entry[0] ] = $option_entry[2] ;
if ( isset( $option_entry[3] ) ) {
$field_type_array[ $option_entry[0] ] = $option_entry[3] ;
$field_descriptor_array[ $option_entry[0] ] = $option_entry[4] ;
} else {
$field_type_array[ option_entry[0] ] = 'text' ;
$field_descriptor_array[ $option_entry[0] ] = NULL ;
}
}


echo "<form action='' method='POST'>" ;
foreach ( $name_value_array as $setting_name => $setting_value ) {
if ( isset( $_POST[ 'submit' ] ) ) {
if ( isset( $_POST[ $setting_name ] ) ) {
$setting_value = $_POST[ $setting_name ] ;
} else {
$setting_value = '' ;
}
}
$setting_label = $option_name_label_array[ $setting_name ] ;
$setting_field_type = $field_type_array[ $setting_name ] ;
$setting_field_descriptor = $field_descriptor_array [ $setting_name ] ;
echo "<label for=$setting_name >$setting_label</label>" ;
switch ( $setting_field_type ) {
case 'checkbox':
echo "<input type='checkbox' id=" . $setting_name . " name=" . $setting_name . " value='checked' " . $setting_value . " >(" . $setting_field_descriptor . ")</input><br />" ;
break ;
default:
echo "<input type='text' id=" . $setting_name . " name=" . $setting_name . " value=" . $setting_value . " ></input><br />" ;
}
}
echo "<input type='submit' value='Submit' name='submit' >" ;
echo "</form>" ;

我也喜欢这个解决方案，你只是发布一个额外的输入字段，使用JavaScript似乎有点hack对我来说。

取决于你使用什么你的后端将取决于哪个输入先去。

对于使用第一次出现的服务器后端(JSP)，您应该执行以下操作。

  <input type="checkbox" value="1" name="checkbox_1"/>
<input type="hidden" value="0" name="checkbox_1"/>

  <input type="hidden" value="0" name="checkbox_1"/>
<input type="checkbox" value="1" name="checkbox_1"/>

< br >

对于服务器后端，其中所有事件都存储在列表数据类型([]，array)中。(Python / Zope)

你可以按照你喜欢的任何顺序发布，你只需要尝试从输入中获取带有checkbox类型属性的值。如果复选框在隐藏元素之前，列表的第一个索引如果复选框在隐藏元素之后，列表的最后一个索引。

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

图像来源 .

复选框的问题是，如果它们没有被选中，那么它们就不会随表单一起发布。如果你选中一个复选框并提交一个表单，你将在$_POST变量中获得该复选框的值，你可以使用它来处理表单，如果它未选中，则不会向$_POST变量中添加任何值。

在PHP中，通常可以通过对复选框元素执行isset()检查来解决这个问题。如果你期望的元素没有在$_POST变量中设置，那么我们知道复选框没有被选中，值可以为false。

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

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

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

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

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

<input type="checkbox" id="checkbox" name="field_name" value="1">

isset($_POST['field_name']) ? $entity->attribute = $_POST['field_name'] : $entity->attribute = 0;

使用普通IF运算符:

if (isset($_POST['field_name'])) {
$entity->attribute = $_POST['field_name'];
} else {
$entity->attribute = 0;
}

如果你想提交一个复选框值的数组(包括未选中的项)，那么你可以尝试这样做:

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

一句话解决方案:

$option1ChkBox = array_key_exists('chkBoxName', $_POST) ? true : false;

可能看起来很傻，但对我很管用。主要缺点是在视觉上是一个单选按钮，而不是一个复选框，但它不需要任何javascript。

超文本标记语言

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

提琴在这里

我想听到你在这段代码中发现的任何问题，因为我在生产中使用它

当提交时复选框未选中时，将复选框的值更新为'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;
})

我知道这个问题已经提出3年了，但我找到了一个我认为非常有效的解决方案。

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

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

isset()函数检查$_POST变量是否被赋值。按照逻辑，如果它没有被分配，那么复选框就不会被选中。

最简单的解决办法是“哑巴”;复选框加上隐藏输入，如果你正在使用jquery:

 <input id="id" type="hidden" name="name" value="1/0">
<input onchange="$('#id').val(this.checked?1:0)" type="checkbox" id="dummy-id"
name="dummy-name" value="1/0" checked="checked/blank">

将两个输入的值设置为当前的1/0值，如果为1，则checked=checked。输入字段(活动)现在将始终被发布为1或0。此外，复选框可以在提交前点击多次，仍然可以正常工作。

对于复选框，一个不使用隐藏类型值的简单方法是:

<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"];

这是对之前答案的一种尝试，以自动保留具有特定值(在本例中为0)的未选中复选框，而不会在提交时选中所有复选框。

$("form").submit(function () {
let this_master = $(this);


// Remove any of the hidden values that may already be there (if the user previously canceled the submit)
this_master.find("*[id^='hiddenchkinput_']").remove();


// Get all unchecked checkboxes
this_master.find('input:checkbox:not(:checked)').each(function () {
let thisChk = $(this);


// Create a hidden input with the same name as the checkbox
let newInput = document.createElement('input');
$(newInput).attr('name', thisChk.attr('id'))
.attr('id', 'hiddenchkinput_' + thisChk.attr('id'))
.attr('type', 'hidden')
.val('0');
// Append the new input to the end of the form
this_master.append(newInput);
});
})

我们可以检查$_POST/Request元素是否有它。然后将它赋值给一个变量。

$value = (null !== $_POST['checkboxname']) ? 'YES' : 'NO';

这与isset()函数非常相似。但是isset()函数不能用于表达式的结果。我们可以用null检查它的结果，并达到相同的效果。

最后的值只是虚数。如果所需字段为布尔类型，我们可以将“YES”更改为1，将“NO”更改为0。