POST непроверенные флажки HTML

У меня есть множество флажков, которые установлены по умолчанию. Мои пользователи, вероятно, снимают флажки с нескольких (если они есть), а остальные оставляют отмеченными.

Есть ли способ сделать форму POST флажками, которые не отмечены , а не теми, которые отмечены ?

Добавьте скрытый ввод для флажка с другим идентификатором:

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

На стороне сервера мы сначала обнаруживаем список скрытых переменных, и для каждой из скрытых переменных мы пытаемся увидеть, представлена ​​ли соответствующая запись флажка в данных формы или нет.

Алгоритм на стороне сервера, вероятно, будет выглядеть так:

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и если флажок установлен, назначьте 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');
        }
    })
})

$('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 в форме отправки события. Это все, что вы можете сделать, однако, нет способа заставить браузеры делать это самостоятельно. Это также означает, что ваша форма сломается для пользователей без Javascript. Лучше знать на сервере, какие флажки имеются, чтобы вы могли сделать вывод, что те, которые отсутствуют в опубликованных значениях формы ( $_POSTв PHP), не проверены.

Я бы на самом деле сделал следующее.

У меня есть скрытое поле ввода с тем же именем с флажком ввода

<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 декабря 2009 в 15:19» Я хотел бы рекомендовать его от владельца. Как указано: решение javascript зависит от того, как обработчик сервера (я его не проверял)

Такие как

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

Я знаю, что этому вопросу уже 3 года, но я нашел решение, которое, я думаю, работает довольно хорошо.

Вы можете проверить, назначена ли переменная $ _POST, и сохранить ее в переменной.

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

функция isset () проверяет, назначена ли переменная $ _POST. По логике, если он не назначен, флажок не установлен.

Большинство ответов здесь требуют использования 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);
}

?>

Исходные данные могут быть загружены при каждой загрузке страницы, но их следует изменять только в том случае, если форма была отправлена. Поскольку названия флажков известны заранее, их можно просматривать и проверять индивидуально, так что отсутствие их отдельных значений указывает на то, что они не проверены.

Сначала я попробовал версию Сэма. Хорошая идея, но она приводит к тому, что в форме будет несколько элементов с одинаковым именем. Если вы используете любой javascript, который находит элементы на основе имени, он теперь вернет массив элементов.

Я разработал идею Шайлеша на PHP, она работает для меня. Вот мой код:

/ * Удалите поля «.hidden», если присутствует оригинал, используйте значение «.hidden», если нет. * /
foreach ($ _POST ['frmmain'] как $ field_name => $ value)
{
    // Просмотр только элементов, заканчивающихся на «.hidden»
    if (! substr ($ field_name, -strlen ('. hidden'))) {
        перерыв;
    }

    // получить имя без '.hidden'
    $ real_name = substr ($ key, strlen ($ field_name) - strlen ('. hidden'));

    // Создать «поддельное» поле оригинала со значением в «.hidden», если оригинал не существует
    if (! array_key_exists ($ real_name, $ POST_copy)) {
        $ _POST [$ real_name] = $ value;
    }

    // Удалить элемент .hidden
    снята с охраны ($ _ POST [$ field_name]);
}

Мне также нравится решение, которое заключается в том, что вы просто публикуете дополнительное поле ввода, и использование 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) Вам необходимо (разделить / разложить) строку, используя запятую в качестве разделителя для создания типа данных списка. ([] )

Теперь вы можете попытаться получить первый индекс в списке, если флажок был перед скрытым элементом, и захватить последний индекс, если флажок был после скрытого элемента.

источник изображения

Я использую этот блок 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 для события '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);
        }
    })
});

То, что я сделал, было немного по-другому. Сначала я изменил значения всех непроверенных флажков. На «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')
            };

параметры получат значение ИСТИНА ИЛИ ЛОЖЬ.

Флажки обычно представляют двоичные данные, которые хранятся в базе данных в виде значений Да / Нет, 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');
  }
});

Все ответы хороши, но если у вас есть несколько флажков в форме с одинаковым именем, и вы хотите опубликовать статус каждого флажка. Затем я решил эту проблему, поместив скрытое поле с флажком (имя, связанное с тем, что я хочу).

<input type="hidden" class="checkbox_handler" name="is_admin[]" value="0" />
<input type="checkbox" name="is_admin_ck[]" value="1" />

затем управляйте изменением статуса чекбокса с помощью кода ниже:

$(documen).on("change", "input[type='checkbox']", function() {
    var checkbox_val = ( this.checked ) ? 1 : 0;
    $(this).siblings('input.checkbox_handler').val(checkbox_val);
});

Теперь при изменении любого флажка будет меняться значение соответствующего скрытого поля. А на сервере вы можете посмотреть только скрытые поля вместо флажков.

Надеюсь, что это поможет кому-то иметь такие проблемы. ура :)

Проблема с флажками заключается в том, что если они не отмечены, они не публикуются в вашей форме. Если вы отметите флажок и опубликуете форму, вы получите значение флажка в переменной $ _POST, которую вы можете использовать для обработки формы, если она не отмечена, никакое значение не будет добавлено в переменную $ _POST.

В PHP вы обычно обходили бы эту проблему, выполняя проверку isset () над своим элементом checkbox. Если ожидаемый элемент не задан в переменной $ _POST, тогда мы знаем, что флажок не установлен и значение может быть ложным.

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

Но если вы создали динамическую форму, то вы не всегда будете знать атрибут name ваших флажков, если вы не знаете имя флажка, то вы не сможете использовать функцию isset, чтобы проверить, было ли это отправлено с переменная $ _POST.

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

Есть лучший обходной путь. Прежде всего предоставьте атрибут 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 версия ответа @ Вишну.

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

Если вы используете jQuery 1.5 или ниже, используйте функцию .attr () вместо .prop ()

Это решение вдохновлено @ desw's.

Если ваши входные имена имеют «стиль формы», вы потеряете ассоциацию индекса массива со значениями вашего 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);

Таким образом, это решение является излишним для этого вопроса, но оно мне помогло, когда у меня был один и тот же флажок, который встречался много раз для разных строк в таблице. Мне нужно было знать строку, которую представлял флажок, а также знать состояние флажка (отмечено / не отмечено).

Что я сделал, так это убрал атрибут 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 ["has-permissions-values"]. В PHP декодируйте строку в массив, и у вас будет ассоциативный массив, в котором есть каждая строка и значение true / false для каждого соответствующего флажка. Тогда очень легко пройтись и сравнить с текущими значениями базы данных.