Входные данные флажка только публикуют данные, если они отмечены?


184

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

И если данные значения не предоставлены, всегда ли значение по умолчанию всегда включено?

Предполагая, что вышеприведенное верно, является ли это согласованным поведением во всех браузерах?

Ответы:


187

Да, стандартное поведение - это значение отправляется только в том случае, если флажок установлен. Обычно это означает, что вам нужно помнить, какие флажки вы ожидаете на стороне сервера, поскольку не все данные возвращаются из формы.

Значение по умолчанию всегда «включено», оно должно быть одинаковым для всех браузеров.

Это описано в рекомендации W3C HTML 4 :

Флажки (и переключатели) являются переключателями включения / выключения, которые могут переключаться пользователем. Переключатель включен, когда установлен атрибут проверяемого элемента управления. Когда форма отправлена, только элементы управления «вкл» могут стать успешными.


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

Ключ к созданию непротиворечивого валидатора с «разрешенными неудачными элементами управления (т.е. type =" checkbox ») заключается в том, чтобы назначить эти элементы управления формой как временные . Если они не успешны, динамически измените свои дезинфицирующее средство и валидатор соответственно.
Энтони Ратледж,

3
Обходной путь: используйте <select>с двумя вариантами onи off:-)
Энди

83

В HTML каждый <input />элемент связан с одной (но не уникальной) парой имени и значения. Эта пара отправляется в последующем запросе (в данном случае это тело запроса POST), только если <input />он «успешен».

Так что, если у вас есть эти входы в вашей <form>DOM:

<input type="text"     name="one"   value="foo"                        />
<input type="text"     name="two"   value="bar"    disabled="disabled" />
<input type="text"     name="three" value="first"                      />
<input type="text"     name="three" value="second"                     />

<input type="checkbox" name="four"  value="baz"                        />
<input type="checkbox" name="five"  value="baz"    checked="checked"   />
<input type="checkbox" name="six"   value="qux"    checked="checked" disabled="disabled" />
<input type="checkbox" name=""      value="seven"  checked="checked"   />

<input type="radio"    name="eight" value="corge"                      />
<input type="radio"    name="eight" value="grault" checked="checked"   />
<input type="radio"    name="eight" value="garply"                     />

Сгенерирует эти пары имя + значение, которые будут отправлены на сервер:

one=foo
three=first
three=second
five=baz
eight=grault

Заметь:

  • twoи sixбыли исключены, потому что у них был установлен disabledатрибут.
  • three был отправлен дважды, потому что у него было два допустимых входа с одинаковым именем.
  • fourне был отправлен, потому что это checkboxне былоchecked
  • sixне был отправлен несмотря на то, checkedчто disabledатрибут имеет более высокий приоритет.
  • sevenне имеет name=""отправленного атрибута, поэтому он не передан.

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

Фреймворки, такие как ASP.NET MVC, обходят это путем (тайно) связывания каждого checkboxввода с hiddenвводом в отображаемом HTML, например, так:

@Html.CheckBoxFor( m => m.SomeBooleanProperty )

Оказывает:

<input type="checkbox" name="SomeBooleanProperty" value="true" />
<input type="hidden"   name="SomeBooleanProperty" value="false" />

Если пользователь не установит флажок, на сервер будет отправлено следующее:

SomeBooleanProperty=false

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

SomeBooleanProperty=true
SomeBooleanProperty=false

Но сервер будет игнорировать =falseверсию, потому что он видит =trueверсию, и поэтому, если он не видит, =trueон может определить, что флажок был отображен и что пользователь не проверял его, в отличие от SomeBooleanPropertyвходных данных, которые вообще не отображались.


Стоит отметить, что если у вас есть несколько полей, например, с дополнительным скрытым текстовым полем, то серверная часть получит массив значений.
Салями

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

Имея два поля с одинаковым именем (скрытое поле + поле флажка) и устанавливая флажок, значение post является разделенной запятой строкой значений, т.е. что-то вроде «0,1»
ʞᴉɯ

1
@beeglebug То, что вы описываете, это то, как PHP обрабатывает имена и значения, []суффикс не является частью спецификации HTML, и браузеры не обращаются с ним специально. Без []PHP разрешит доступ только к одному значению (последнему значению) вместо всех значений.
Дай

1
Использование свойства hidden до того, как у меня работает флажок во всех браузерах, которые я тестировал, используя GET и POST с PHP. Когда я помещал это после контроля флажка, это всегда рендерило результат, ложный.
Adrianwadey

16

Если флажок не установлен, он не влияет на данные, отправленные при отправке формы.

Раздел HTML5 4.10.22.4 Создание набора данных формы описывает способ построения данных формы:

Если выполняется любое из следующих условий, пропустите эти подшаги для этого элемента: [...]

Элемент field является входным элементом, атрибут type которого находится в состоянии Checkbox, а checkness имеет значение false.

и тогда значение по умолчанию onуказывается, если valueотсутствует:

В противном случае, если элемент поля является входным элементом, атрибут type которого находится в состоянии «Флажок» или «Переключатель», выполните следующие вложенные подэтапы:

Если для элемента поля указан атрибут value, то пусть value будет значением этого атрибута; в противном случае пусть value будет строкой «on».

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

Подобное поведение требуется в HTML4 . Разумно ожидать такого поведения от всех совместимых браузеров.


10

Флажки публикуют значение «вкл» тогда и только тогда, когда флажок установлен. Установленный для ловли значения флажка вы можете использовать скрытые вводы

JS :

var chk = $('input[type="checkbox"]');
    chk.each(function(){
        var v = $(this).attr('checked') == 'checked'?1:0;
        $(this).after('<input type="hidden" name="'+$(this).attr('rel')+'" value="'+v+'" />');
    });

chk.change(function(){ 
        var v = $(this).is(':checked')?1:0;
        $(this).next('input[type="hidden"]').val(v);
    });

HTML :

<label>Active</label><input rel="active" type="checkbox" />

8

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

Да, потому что в противном случае не было бы надежного способа определить, был ли флажок установлен на самом деле или нет (если он изменил значение, может существовать случай, когда желаемое значение, если оно было проверено, будет таким же, как и то, что было поменялся на).

И если данные значения не предоставлены, всегда ли значение по умолчанию всегда включено?

Другие ответы подтверждают, что «по умолчанию» включено. Однако, если вы не заинтересованы в значении, просто используйте:

if (isset($_POST['the_checkbox'])){
    // name="the_checkbox" is checked
}

7

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

http://www.w3.org/TR/html401/interact/forms.html#checkbox

Флажки (и переключатели) являются переключателями включения / выключения, которые могут переключаться пользователем. Переключатель включен, когда установлен атрибут проверяемого элемента управления. Когда форма отправлена, только элементы управления «вкл» могут стать успешными.

Успешный определяется следующим образом:

Успешный контроль «действителен» для отправки. Каждый успешный элемент управления имеет имя элемента управления в паре с его текущим значением как часть отправленного набора данных формы. Успешный элемент управления должен быть определен в элементе FORM и должен иметь имя элемента управления.


5

тип ввода = "скрытый" имя = "is_main" значение = "0"

input type = "checkbox" name = "is_main" value = "1"

так что вы можете контролировать это, как я сделал в приложении. если он проверяет, отправьте значение 1, иначе 0


3

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

<input type="hidden" name="foo[]" value="off"/>

<input type="checkbox" name="foo[]"/>

Затем на стороне сервера, используя небольшой алгоритм, вы можете получить что-то более похожее на HTML.

function checkboxHack(array $checkbox_input): array
{
    $foo = [];
    foreach($checkbox_input as $value) {
        if($value === 'on') {
            array_pop($foo);
        }
        $foo[] = $value;
    }
    return $foo;
}

Это будет необработанный ввод

array (
    0 => 'off',
    1 => 'on',
    2 => 'off',
    3 => 'off',
    4 => 'on',
    5 => 'off',
    6 => 'on',
),

И функция вернется

array (
    0 => 'on',
    1 => 'off',
    2 => 'on',
    3 => 'on',
)  

1

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

Сначала я поставил скрытое поле ввода в соответствие с моим флажком, т.е.

 <td><input class = "chkhide" type="hidden" name="delete_milestone[]" value="off"/><input type="checkbox" name="delete_milestone[]"   class="chk_milestone" ></td>

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

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

  'delete_milestone' => 
array (size=7)
  0 => string 'off' (length=3)
  1 => string 'off' (length=3)
  2 => string 'off' (length=3)
  3 => string 'on' (length=2)
  4 => string 'off' (length=3)
  5 => string 'on' (length=2)
  6 => string 'off' (length=3)

Это показывает, что только 3-й и 4-й флажки являются onили checked.

В сущности, манекен или скрытые поля ввода просто указывает , что все выключено , если не является «на» ниже индекс выключен, который затем дает индекс вам нужно без единой строчки кода на стороне клиента.

,


0

Точно так же, как вариант ASP.NET, за исключением того, что ставьте скрытый ввод с тем же именем перед фактическим флажком (с тем же именем). Будут отправлены только последние значения. Таким образом, если флажок установлен, то отправляется его имя и значение «on», тогда как если флажок снят, то будет отправлено имя соответствующего скрытого ввода и любое значение, которое вы хотели бы дать ему. В конце вы получите считываемый массив $ _POST со всеми отмеченными и непроверенными элементами, значениями on и false, без дубликатов ключей. Легко обрабатывать в PHP.


0

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

Получение всех непроверенных флажков с

var checkboxQueryString;

$form.find ("input[type=\"checkbox\"]:not( \":checked\")" ).each(function( i, e ) {
  checkboxQueryString += "&" + $( e ).attr( "name" ) + "=N"
});

-2

Я решил проблему с этим кодом:

HTML-форма

<input type="checkbox" id="is-business" name="is-business" value="off" onclick="changeValueCheckbox(this)" >
<label for="is-business">Soy empresa</label>

и функцию javascript путем изменения формы значения флажка:

//change value of checkbox element
function changeValueCheckbox(element){
   if(element.checked){
    element.value='on';
  }else{
    element.value='off';
  }
}

и сервер проверил, является ли сообщение данных «включено» или «выключено». Я использовал playframework Java

        final Map<String, String[]> data = request().body().asFormUrlEncoded();

        if (data.get("is-business")[0].equals('on')) {
            login.setType(new MasterValue(Login.BUSINESS_TYPE));
        } else {
            login.setType(new MasterValue(Login.USER_TYPE));
        }
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.