我有一堆默认选中的复选框。我的用户可能会取消选中一些复选框(如果有的话),并选中其余的复选框。
是否有任何方法使表单POST未选中的复选框,而不是选中的复选框?
我有一堆默认选中的复选框。我的用户可能会取消选中一些复选框(如果有的话),并选中其余的复选框。
是否有任何方法使表单POST未选中的复选框,而不是选中的复选框?
当前回答
为不同ID的复选框添加一个隐藏输入:
<input id='testName' type='checkbox' value='Yes' name='testName'>
<input id='testNameHidden' type='hidden' value='No' name='testName'>
在提交表单之前,根据检查的条件禁用隐藏输入:
form.addEventListener('submit', () => {
if(document.getElementById("testName").checked) {
document.getElementById('testNameHidden').disabled = true;
}
}
其他回答
$('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数组。
我更喜欢不需要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>" ;
有一个更好的解决办法。 首先,只向选中的复选框提供name属性。 然后点击提交,通过JavaScript函数检查所有未选中的框。 当你提交时,只有那些会在表单集合中检索到那些有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);
});
优势: 不需要创建额外的隐藏框,并操作它们。
我使用这个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
为不同ID的复选框添加一个隐藏输入:
<input id='testName' type='checkbox' value='Yes' name='testName'>
<input id='testNameHidden' type='hidden' value='No' name='testName'>
在提交表单之前,根据检查的条件禁用隐藏输入:
form.addEventListener('submit', () => {
if(document.getElementById("testName").checked) {
document.getElementById('testNameHidden').disabled = true;
}
}