РАЗМЕЩАТЬ снятые флажки HTML
https://stackoverflow.com/questions/1809494
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianВопрос
У меня есть множество флажков, которые установлены по умолчанию.Мои пользователи, вероятно, снимут несколько флажков (если таковые имеются) и оставят остальные отмеченными.
Есть ли какой-нибудь способ заставить форму РАЗМЕЩАТЬ флажки, которые нет проверено, а не те, которые являются проверили?
Решение
Добавьте скрытый ввод для флажка с другим идентификатором:
<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 (установлено).
Мой личный фаворит - добавить скрытое поле с тем же именем, которое будет использоваться, если флажок снят. Но решение не так просто, как может показаться.
Если вы добавите этот код:
<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"/>
На стороне сервера мы сначала обнаруживаем список скрытых переменных и для каждой из скрытых переменных пытаемся посмотреть, отправлена ли соответствующая запись checkbox в данных формы или нет.
Алгоритм на стороне сервера, вероятно, будет выглядеть следующим образом:
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.
Лучше узнать на сервере, какие флажки имеются, чтобы вы могли сделать вывод, что те, которые отсутствуют в опубликованных значениях формы ($_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 1 декабря '09 в 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);
}
?>
Исходные данные могут быть загружены при каждой загрузке страницы, но должны быть изменены только в том случае, если форма была отправлена.Поскольку названия флажков известны заранее, их можно обойти и проверить по отдельности, так что отсутствие их отдельных значений указывает на то, что они не проверены.
Сначала я попробовал версию Сэма. Хорошая идея, но она приводит к тому, что в форме будет несколько элементов с одинаковым именем. Если вы используете любой javascript, который находит элементы на основе имени, он теперь вернет массив элементов.
Я разработал идею Шайлеша на 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]);
}
Я использую этот блок 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 введите атрибут.Таким образом, первый индекс списка, если флажок был перед скрытым элементом, и последний индекс, если флажок был после скрытого элемента.
Для серверной части, где все вхождения объединяются запятой (ASP.NET / IIS)
Вам нужно будет (разделить / разнести) строку, используя запятую в качестве разделителя, чтобы создать тип данных list.([])
Теперь вы можете попытаться захватить первый индекс списка, если флажок был установлен перед скрытым элементом, и захватить последний индекс, если флажок был после скрытого элемента.
Я вижу, что этот вопрос старый и на него так много ответов, но я все равно отдаю свою копейку. Как я уже отмечал, мой голос за решение javascript для события формы submit. Не нужно дублировать входные данные (особенно если у вас длинные имена и атрибуты с php-кодом, смешанным с html), не надоедать на стороне сервера (для этого нужно знать все имена полей и проверять их по одному), просто выбирайте все непроверенные элементы присвойте им значение 0 (или все, что вам нужно, чтобы указать статус «не проверено»), а затем измените их атрибут «отмечено» на 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', он не проверяется, поэтому присваивает значение.
вы можете создать массив ваших значений в ckeckbox и создать функцию, которая проверяет, существуют ли значения, если их нет, это не имеет значения, и вы можете присвоить значение
Пример действий Ajax (': флажок') использует jQuery вместо .val ();
var params = {
books: $('input#users').is(':checked'),
news : $('input#news').is(':checked'),
magazine : $('input#magazine').is(':checked')
};
params получит значение в ИСТИНА ИЛИ ЛОЖЬ.
Флажки обычно представляют двоичные данные, которые хранятся в базе данных в виде значений Да / Нет, 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 " 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'];
}
Но если вы создали динамическую форму, вы не всегда будете знать атрибут name ваших флажков, если вы не знаете имя флажка, то вы не сможете использовать функцию 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's.
Если ваши входные имена в " style style ", вы потеряете ассоциацию индекса массива со значениями вашего chekbox, как только проверяется один chekbox, увеличивая это значение " disociation Quot; на одну единицу каждый раз, когда проверяется чекбокс. Это может быть случай формы для вставки чего-то вроде сотрудников, составленных из некоторых полей, например:
<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 из моих входных данных 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="">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["имеет-разрешения-значения"].В 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);
});
теперь при изменении любого флажка изменится значение соответствующего скрытого поля.А на сервере вы можете смотреть только на скрытые поля вместо флажков.
Надеюсь, это поможет кому-нибудь столкнуться с подобной проблемой.подбадривать :)
