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

Question

У меня есть HTML-форма, и я бы хотел, чтобы ВСЕГДА были установлены флажки для отправки значения.Как я могу это сделать?У меня есть одна идея, но я не пробовал ее, и я не уверен, что это лучший способ сделать это (jquery, чтобы проверить, установлен флажок или нет, затем установите значение 0/1 и отметьте его, чтобы он отправлял)

Answer 1

Благодаря идее @ Lazarus , также упоминаемой @ BalusC , вы можете добавить в форму дополнительный элемент управления:

<input type="hidden" name="checkbox1" value="off">
<input type="checkbox" name="checkbox1" value="on"> My checkbox

Флажок и скрытые поля должны иметь одинаковые имена. Скрытый ввод всегда представлен как значение по умолчанию. Если флажок установлен, то он также представлен. Таким образом, у вас есть список из 2 значений для параметра "checkbox1", который вы должны обработать на стороне сервера.

... возможно, тег <select> будет более удобным.

Answer 2

Есть законная причина для того, чтобы просить что-то подобное, хотя предполагаемое здесь поведение не является правильным способом для этого.Существует проблема с флажком при правильном использовании при редактировании существующих данных , и заключается в том, что невозможно определить, было ли передано значение, так как поле не присутствовало в форме или пользователь удалил всеценности.Вы можете столкнуться с подобной проблемой в любое время, если вы включите поля условно.

Конечно, может возникнуть проблема с поддержанием «состояния просмотра», но гораздо проще включить скрытое «поле сопутствующего документа»всякий раз, когда отображается флажок или выбор с опцией множественного выбора (которая также исключается, когда все выборы очищены).Поле должно иметь связанное, но другое имя (имя, из которого можно извлечь фактическое имя поля).Сервер Lotus Domino использовал поля с именем %% Surrogate_FieldNameHere для этой цели начиная с (я полагаю) версии 7 именно по той причине, которую я описал здесь.

Answer 3

Сказать по правде, это похоже на большое нет-нет.

В любом случае здесь идет:

<script type="text/javascript">
$(document).ready(function () {
    $('form').submit(function() {
        $(this).find('input[type=checkbox]').each(function () {
            $(this).attr('value', $(this).is(':checked') ? '1' : '0');
            $(this).attr('checked', true);
        });
    });
});
</script>

Answer 4

Это полностью противоречит естественному / заданному поведению флажков в HTML. Если флажок установлен, то его value будет отправлено как параметр. Если флажок не установлен, его value не будет отправлено в качестве параметра. Как еще вы на стороне сервера сможете отличить отмеченные флажки от непроверенных? Обратите внимание, что если value не указан, большинство браузеров по умолчанию имеют значение «on». Будет проще, если вы установите все флажки одинаковыми name, но разными и фиксированными value. Таким образом, вы можете получить проверенные в виде массива / коллекции.

Если все флажки уже известны заранее на стороне сервера, вы можете просто применить базовую математику для получения непроверенных флажков:

uncheckedCheckboxes = allCheckboxes - checkedCheckboxes

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

Если эти флажки создаются динамически на стороне клиента, то добавьте для каждого флажка поле <input type="hidden">, содержащее информацию о флажке, чтобы на стороне сервера было известно, какие флажки присутствуют на момент отправки.

Answer 5

Хотя это идет вразрез со спецификацией HTML, если вы знаете, что делаете, при использовании этого вам больше не нужно ставить флажки, которые обрабатываются совершенно по-разному при отправке - и, например, именование полей with_brackets[] может фактически использоваться.1002 *

Полное решение

$(document).on('submit', 'form', function() {
    $(this).find('input[type=checkbox]').each(function() {
        var checkbox = $(this);

        // add a hidden field with the same name before the checkbox with value = 0
        if ( !checkbox.prop('checked') ) {
            checkbox.clone()
                .prop('type', 'hidden')
                .val(0)
                .insertBefore(checkbox);
        }
    });
});

Обратите внимание: флажки, не отмеченные флажками, теперь предоставляют значение "0"

---

Дополнительно, еслиВы хотите изменить поведение только одной формы, просто измените первую строку в приведенном выше фрагменте:

$(document).on('submit', 'form.your-class-name', function() {
    // ...
});

Answer 6

Если у вас много флажков, вы можете попробовать этот код:

<input type="checkbox" onclick="$(this).next().val(this.checked?1:0)"/> <input type="hidden" name="checkbox1[]"/>

Answer 7

Если у вас есть следующий HTML:

<form id="myform" method="post" action="my/url">
    <input type="checkbox" id="checkbox1" name="checkbox1"/>
    <input type="checkbox" id="checkbox2" name="checkbox2"/>
    <input type="checkbox" id="checkbox3" name="checkbox3"/>
</form>

Обычная форма отправки:

При отправке формы перед отправкой измените все значения флажков на 0 и 1, если флажок снят или не установлен. Вот так:

$('#myform').submit(function() {
    var $checkboxes = $('#myform').find('input[type="checkbox"]');// Select all checkboxes
    $checkboxes.filter(':checked').val(1);// Set value to 1 for checked checkboxes
    $checkboxes.not(':checked').val(0);// Set value to 0 for unchecked checkboxes
    $checkboxes.prop('checked', true);// Change all checkboxes to "checked" so all of them are submitted to server
});

Примечание. Уродливая вещь об этом коде, когда форма отправляется, все флажки на мгновение будут отображаться как «проверенные». Но если вы примените ту же концепцию для отправки формы ajax, было бы лучше.

Форма отправки AJAX:

$.post('my/url', {
    'checkbox1': $('#checkbox1').is(':checked') ? 1 : 0,
    'checkbox2': $('#checkbox2').is(':checked') ? 1 : 0,
    'checkbox3': $('#checkbox3').is(':checked') ? 1 : 0
}, function(response) {
    // Server JSON response..
}, 'json');