Czy pola wyboru wprowadzają dane tylko wtedy, gdy są zaznaczone?

Czy to standardowe zachowanie przeglądarek, aby wysyłać dane wartości wejściowej pola wyboru tylko wtedy, gdy są one sprawdzane po przesłaniu formularza?

A jeśli nie podano danych wartości, czy wartość domyślna jest zawsze „włączona”?

Zakładając, że powyższe jest prawidłowe, czy to spójne zachowanie we wszystkich przeglądarkach?

Tak, standardowe zachowanie oznacza, że ​​wartość jest wysyłana tylko wtedy, gdy pole wyboru jest zaznaczone. Zazwyczaj oznacza to, że musisz mieć sposób na zapamiętanie, jakich pól wyboru oczekujesz po stronie serwera, ponieważ nie wszystkie dane wracają z formularza.

Domyślna wartość jest zawsze „włączona”, powinna być spójna w różnych przeglądarkach.

Jest to opisane w zaleceniu W3C HTML 4 :

Pola wyboru (i przyciski opcji) to przełączniki on / off, które mogą być przełączane przez użytkownika. Przełącznik jest „włączony”, gdy ustawiony jest sprawdzony atrybut elementu sterującego. Po przesłaniu formularza tylko formanty „on” mogą się powieść.

W HTML każdy <input />element jest powiązany z jedną (ale nie unikalną) parą nazwa i wartość. Ta para jest wysyłana w kolejnym żądaniu (w tym przypadku w treści żądania POST) tylko wtedy, gdy <input />jest „udana”.

Więc jeśli masz te dane wejściowe w swoim <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"                     />

Wygeneruje te pary nazwa + wartość, które zostaną przesłane do serwera:

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

Zauważ, że:

• twoi sixzostali wykluczeni, ponieważ mieli disabledustawiony atrybut.
• three został wysłany dwukrotnie, ponieważ miał dwa prawidłowe dane wejściowe o tej samej nazwie.
• fournie zostało wysłane, ponieważ to checkboxnie byłochecked
• sixnie został wysłany pomimo tego, checkedże disabledatrybut ma wyższy priorytet.
• sevennie ma name=""przesłanego atrybutu, więc nie został przesłany.

W odniesieniu do twojego pytania: możesz zobaczyć, że pole wyboru, które nie jest zaznaczone, nie będzie w związku z tym przesyłane do serwera para nazwa-wartość - ale zostaną do niego wysłane inne dane wejściowe o tej samej nazwie.

Frameworki takie jak ASP.NET MVC działają w tym celu (ukradkowo) łącząc każde checkboxwejście z hiddenwejściem w renderowanym HTML, w następujący sposób:

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

Renderuje:

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

Jeśli użytkownik nie zaznaczy pola wyboru, na serwer zostaną wysłane następujące informacje:

SomeBooleanProperty=false

Jeśli użytkownik zaznaczy pole wyboru, oba zostaną wysłane:

SomeBooleanProperty=true
SomeBooleanProperty=false

Ale serwer zignoruje =falsewersję, ponieważ ją widzi =true, a więc jeśli jej nie widzi =true, może stwierdzić, że pole wyboru zostało zrenderowane i że użytkownik go nie sprawdził - w przeciwieństwie do SomeBooleanPropertybraku renderowania danych wejściowych.

Jeśli pole wyboru nie jest zaznaczone, nie ma wpływu na dane przesyłane przy składaniu formularza.

Sekcja HTML5 4.10.22.4 Konstruowanie zestawu danych formularza opisuje sposób konstruowania danych formularza:

Jeśli którykolwiek z poniższych warunków jest spełniony, pomiń te kroki dla tego elementu: [...]

Element pola jest elementem wejściowym, którego atrybut typu znajduje się w stanie Checkbox i którego sprawdzanie jest fałszywe.

a następnie onokreślana jest wartość domyślna, jeśli jej valuebrakuje:

W przeciwnym razie, jeśli element pola jest elementem wejściowym, którego atrybut type znajduje się w stanie Checkbox lub Radio Button, uruchom następujące zagnieżdżone podetapy:

Jeśli element pola ma określony atrybut wartości, niech wartość będzie wartością tego atrybutu; w przeciwnym razie wartość powinna być ciągiem „on”.

W ten sposób niezaznaczone pola wyboru są pomijane podczas budowy danych formularza.

Podobne zachowanie jest wymagane w HTML4 . Można oczekiwać tego zachowania od wszystkich zgodnych przeglądarek.

Pola wyboru wysyłają wartość „on” tylko wtedy, gdy pole wyboru jest zaznaczone. Zaraz po złapaniu wartości pola wyboru możesz użyć ukrytych danych wejściowych

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

Czy to standardowe zachowanie przeglądarek, aby wysyłać dane wartości wejściowej pola wyboru tylko wtedy, gdy są one sprawdzane po przesłaniu formularza?

Tak, ponieważ w przeciwnym razie nie byłoby solidnego sposobu ustalenia, czy pole wyboru zostało faktycznie zaznaczone, czy nie (jeśli zmieniłoby to wartość, może istnieć przypadek, gdy żądana wartość, jeśli została sprawdzona, byłaby taka sama jak ta, którą była zamieniony na).

A jeśli nie podano danych wartości, czy wartość domyślna jest zawsze „włączona”?

Inne odpowiedzi potwierdzają, że „włączone” jest ustawieniem domyślnym. Jeśli jednak nie jesteś zainteresowany tą wartością, po prostu użyj:

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

Ze specyfikacji HTML 4, która powinna być spójna w prawie wszystkich przeglądarkach:

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

Pola wyboru (i przyciski opcji) to przełączniki on / off, które mogą być przełączane przez użytkownika. Przełącznik jest „włączony”, gdy ustawiony jest sprawdzony atrybut elementu sterującego. Po przesłaniu formularza tylko formanty „on” mogą się powieść.

Sukces definiuje się następująco:

Pomyślna kontrola jest „ważna” do złożenia. Każda udana kontrola ma powiązaną nazwę z bieżącą wartością jako część zestawu danych przesłanych formularzy. Pomyślna kontrola musi być zdefiniowana w elemencie FORM i musi mieć nazwę kontrolną.

typ wejścia = „ukryty” nazwa = „is_main” wartość = „0”

typ wejścia = „pole wyboru” nazwa = „is_main” wartość = „1”

więc możesz kontrolować tak jak ja w aplikacji. jeśli sprawdzi, wyślij wartość 1 w przeciwnym razie 0

Żadna z powyższych odpowiedzi mnie nie zadowoliła. Odkryłem, że najlepszym rozwiązaniem jest włączenie ukrytego wejścia przed każdym wejściem pola wyboru o tej samej nazwie.

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

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

Następnie po stronie serwera, używając małego algorytmu, możesz uzyskać coś więcej niż HTML powinien zapewnić.

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

To będzie surowe wejście

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

Funkcja powróci

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

Mam stronę (formularz), która dynamicznie generuje pole wyboru, więc te odpowiedzi były bardzo pomocne. Moje rozwiązanie jest bardzo podobne do wielu tutaj, ale nie mogę przestać myśleć, że łatwiej jest je wdrożyć.

Najpierw ustawiam ukryte pole wprowadzania zgodnie z moim polem wyboru, tj

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

Teraz, jeśli wszystkie checkboxeszostaną odznaczone, wartości zwrócone przez ukryte pole zostaną wyłączone.

Na przykład tutaj, z pięcioma dynamicznie wstawionymi polami wyboru, tworzą POSTSnastępujące wartości:

  '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)

To pokazuje, że tylko trzecie i czwarte pole wyboru to onlub checked.

Zasadniczo lub ukryte pole wejściowe wskazuje po prostu, że wszystko jest wyłączone, chyba że pod indeksem wyłączenia znajduje się „on” , co daje indeks, którego potrzebujesz bez jednego wiersza kodu po stronie klienta.

.

Podobnie jak wariant ASP.NET, z tym wyjątkiem, że ukryte dane wejściowe o tej samej nazwie znajdują się przed rzeczywistym polem wyboru (o tej samej nazwie). Zostaną wysłane tylko ostatnie wartości. W ten sposób, jeśli pole jest zaznaczone, wówczas wysyłana jest jego nazwa i wartość „on”, natomiast jeśli nie jest zaznaczone, nazwa odpowiedniego ukrytego wejścia i dowolna wartość, jaką chcesz mu nadać, zostanie wysłana. Na koniec dostaniesz tablicę $ _POST do odczytu, ze wszystkimi zaznaczonymi i niezaznaczonymi elementami, wartościami „on” i „false”, bez duplikatów kluczy. Łatwy do przetworzenia w PHP.

Mając ten sam problem z niezaznaczonymi polami wyboru, które nie będą wysyłane przy przesyłaniu formularzy, wyszedłem z innym rozwiązaniem niż dublowanie elementów pola wyboru.

Pobieranie wszystkich niezaznaczonych pól wyboru z

var checkboxQueryString;

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

Rozwiązałem problem z tym kodem:

Formularz HTML

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

i funkcję javascript, zmieniając formularz wartości pola wyboru:

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

a serwer sprawdził, czy wpis danych jest „włączony” czy „wyłączony”. Użyłem 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));
        }