У меня есть флажок флажка, который по умолчанию проверен. Мои пользователи, вероятно, снимут флажки (если есть), и оставьте остальные.
Есть ли способ сделать форму POST флажками, которые не отмечены, а не те, которые были проверены?
Добавьте скрытый ввод для флажка с другим 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>
Я решил это, используя простой (собственный) 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 (установлено).
Общей методикой является перенос скрытой переменной вместе с каждым флажком.
<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>
Браузеру действительно не понравится то, что вы здесь делаете. Браузер отправит оба параметра на сервер, и сервер должен решить, что с ними делать.
Например, для PHP используется последнее значение (см. Авторитарная позиция дублирующих ключей HTTP GET)
Но другие системы, с которыми я работал (на базе Java), делают это так: они предлагают вам только первое значение. Вместо этого .NET даст вам массив с двумя элементами вместо
Я попытаюсь проверить это с помощью node.js, Python и Perl в какой-то момент.
вам не нужно создавать скрытое поле для всех флажков, просто скопируйте мой код.
он изменит значение флажка, если не проверено, 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');
}
})
})
Вы можете сделать Javascript в форме submit. Это все, что вы можете сделать, но нет способа заставить браузеры сделать это сами. Это также означает, что ваша форма будет разбита на пользователей без Javascript.
Лучше знать на сервере, какие флажки есть, поэтому вы можете вывести, что те, которые отсутствуют в опубликованных значениях формы ($_POST в PHP), не отмечены.
$('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, выбираем, что отображает каждое из уникальных значений.
$posted = array_unique($_POST['checkbox_name']);
foreach($posted as $value){
print $value;
}
Я получил это из сообщения удалить повторяющиеся значения из массива
"Я пошел с серверным подходом. Кажется, работает отлично - спасибо. - reach4thelasers" Я бы хотел порекомендовать его у владельца. Как указано: решение javascript зависит от того, как обработчик сервера (я его не проверял)
таких как
if(!isset($_POST["checkbox"]) or empty($_POST["checkbox"])) $_POST["checkbox"]="something";
Я сначала попробовал Сэм-версию. Хорошая идея, но она вызывает несколько элементов в форме с тем же именем. Если вы используете любой javascript, который находит элементы на основе имени, он теперь возвращает массив элементов.
Я разработал идею Shailesh в PHP, она работает для меня. Здесь мой код:
/* 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]);
}
В большинстве ответов здесь требуется использование 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>Вы также можете перехватить событие form.submit и обратную проверку перед отправкой
$('form').submit(function(event){
$('input[type=checkbox]').prop('checked', function(index, value){
return !value;
});
});
Я вижу, что этот вопрос старый, и у него так много ответов, но я все равно дам свой пенни. Мое голосование за решение 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
)
Я использую этот блок jQuery, который добавит скрытый ввод в момент отправки к каждому флажку без отметки. Это гарантирует, что вы всегда получаете значение, представленное для каждого флажка, каждый раз, не загромождая свою разметку и рискуя забыть сделать это на флажке, который вы добавите позже. Он также не зависит от того, какой бэкэнд-стек (PHP, Ruby и т.д.) Вы используете.
// Add an event listener on #form 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 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(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);
}
})
});
Мне также нравится решение, которое вы просто размещаете вне поля ввода, используя 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)
Вам понадобится (разбить/разбить) строку с помощью запятой в качестве разделителя для создания типа данных списка. ([])
Теперь вы можете попытаться захватить первый индекс списка, если флажок был перед скрытым элементом и захватить последний индекс, если флажок был после скрытого элемента.
То, что я сделал, было немного иначе. Сначала я изменил значения всех отмеченных флажков. Для "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", оно было снято, поэтому присвойте значение.
вы можете создать массив значений 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-флажки имеют плохую природу для отправки значения серверу, только если установлен флажок! Это означает, что сервер script на другом сайте должен заранее знать все возможные флажки на веб-странице, чтобы иметь возможность сохранять положительные (отмеченные) или отрицательные (непроверенные) значения. Фактически только отрицательные значения являются проблемой (когда пользователь отменяет ранее (предварительно) проверенное значение - как сервер знает об этом, когда ничего не отправляется, если он заранее не знает, что это имя должно быть отправлено). Если у вас есть серверная сторона script, которая динамически создает UPDATE script, возникает проблема, потому что вы не знаете, какие все флажки должны быть приняты, чтобы установить значение 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 listener и функцию проверки вызовов() для каждого флажка на моей веб-странице:
function check(me)
{
if(me.checked)
{
me.previousSibling.previousSibling.value='Y';
}
else
{
me.previousSibling.previousSibling.value='N';
}
}
Таким образом, значения "Y" или "N" всегда отправляются на серверную сторону script, он знает, какие поля должны обновляться, и нет необходимости конвертировать значение checbox "on" в "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() на элементе checkbox. Если элемент, который вы ожидаете, не установлен в переменной $_POST, мы знаем, что флажок не установлен, и значение может быть ложным.
if(!isset($_POST['checkbox1']))
{
$checkboxValue = false;
} else {
$checkboxValue = $_POST['checkbox1'];
}
Но если вы создали динамическую форму, вы не всегда будете знать атрибут имени своих флажков, если вы не знаете имя этого флажка, то вы не можете использовать функцию isset для проверки того, был отправлен с переменной $_POST.
Это может быть выполнено только с помощью некоторого javascript, так как неконтролируемые флажки не передаются. Таким образом, вам нужен javascript, например, за кулисами добавляет скрытые поля при снятии флажка. Без javascript это невозможно.
Существует лучшее решение.
Прежде всего укажите атрибут name только для отмеченных флажков.
Затем, щелкнув submit, с помощью JavaScript function вы проверите все флажки без флажка.
Поэтому, когда вы submit, в 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>
jQuery версия ответа @vishnu.
if($('#testName').is(":checked")){
$('#testNameHidden').prop('disabled', true);
}
Если вы используете jQuery 1.5 или ниже, используйте функцию .attr() вместо .prop()
Это решение вдохновлено @desw one.
Если ваши имена ввода находятся в "стиле формы", вы потеряете ассоциацию индекса массива с вашими значениями chekbox, как только проверяется один chekbox, увеличивая эту "диссоциацию" на единицу каждый раз, когда проверяется 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);
Итак, это решение слишком велико для этого вопроса, но это помогло мне, когда у меня был тот же флажок, который много раз повторялся для разных строк в таблице. Мне нужно было знать строку, в которой представлен флажок, а также знать состояние флажка (отмечено/не отмечено).
То, что я сделал, это взять атрибут имени из моих входов checkbox, дать им все тот же класс и создать скрытый ввод, который будет содержать эквивалент 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="">Все ответы велики, но если у вас есть несколько флажков в форме с тем же именем, и вы хотите опубликовать статус каждого флажка. Затем я решил эту проблему, поместив скрытое поле с флажком (имя связано с тем, что я хочу).
<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);
});
теперь при изменении любого флажка он изменит значение связанного скрытого поля. И на сервере вы можете смотреть только на скрытые поля вместо флажков.
Надеюсь, что это поможет кому-то решить эту проблему. cheer:)
Вы можете добавить скрытые элементы перед отправкой формы.
$('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));
}
})
});