Gli input della casella di controllo pubblicano i dati solo se sono selezionati?

È normale che i browser inviino i dati del valore di input della casella di controllo solo se controllati al momento dell'invio del modulo?

E se non viene fornito alcun valore, il valore predefinito è sempre "attivo"?

Supponendo che quanto sopra sia corretto, questo comportamento è coerente in tutti i browser?

Sì, il comportamento standard è che il valore viene inviato solo se la casella è selezionata. Ciò significa in genere che è necessario disporre di un modo per ricordare quali caselle di controllo ci si aspetta sul lato server poiché non tutti i dati tornano dal modulo.

Il valore predefinito è sempre "attivo", questo dovrebbe essere coerente tra i browser.

Questo è trattato nella raccomandazione HTML 4 del W3C :

Le caselle di controllo (e i pulsanti di opzione) sono interruttori on / off che possono essere attivati ​​/ disattivati ​​dall'utente. Un interruttore è "on" quando è impostato l'attributo controllato dell'elemento di controllo. Quando viene inviato un modulo, solo i controlli "on" possono avere esito positivo.

In HTML, ogni <input />elemento è associato a un singolo (ma non unico) nome e coppia di valori. Questa coppia viene inviata nella richiesta successiva (in questo caso, un corpo di richiesta POST) solo se <input />"ha esito positivo".

Quindi se hai questi input nel tuo <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"                     />

Genererà queste coppie nome + valore che verranno inviate al server:

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

Notare che:

• twoe sixsono stati esclusi perché avevano l' disabledattributo impostato.
• three è stato inviato due volte perché aveva due input validi con lo stesso nome.
• fournon è stato inviato perché non lo è checkboxstatochecked
• sixnon è stato inviato nonostante sia checkedperché l' disabledattributo ha una precedenza più alta.
• sevennon ha un name=""attributo inviato, quindi non viene inviato.

Per quanto riguarda la tua domanda: puoi vedere che una casella non selezionata non avrà quindi il suo nome + coppia valore inviato al server - ma altri input che condividono lo stesso nome verranno inviati con esso.

Frame come ASP.NET MVC aggirano il problema accoppiando (di nascosto) ogni checkboxinput con un hiddeninput nell'HTML renderizzato, in questo modo:

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

Renders:

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

Se l'utente non seleziona la casella di controllo, verrà inviato al server quanto segue:

SomeBooleanProperty=false

Se l'utente seleziona la casella di controllo, verranno inviati entrambi:

SomeBooleanProperty=true
SomeBooleanProperty=false

Ma il server ignorerà la =falseversione perché vede la =trueversione, e quindi se non la vede =truepuò determinare che la casella di controllo è stata visualizzata e che l'utente non l'ha selezionata, al contrario degli SomeBooleanPropertyinput che non sono stati resi affatto.

Se la casella di controllo non è selezionata, non contribuisce ai dati inviati al momento dell'invio del modulo.

Sezione HTML5 4.10.22.4 La costruzione del set di dati del modulo descrive il modo in cui vengono costruiti i dati del modulo:

Se si verifica una delle seguenti condizioni, saltare questi passaggi secondari per questo elemento: [...]

L'elemento field è un elemento di input il cui attributo type si trova nello stato Checkbox e la cui checkiness è falsa.

e quindi onviene specificato il valore predefinito se valuemanca:

In caso contrario, se l'elemento campo è un elemento di input il cui attributo type si trova nello stato Casella di controllo o Pulsante di opzione, eseguire questi ulteriori passaggi secondari nidificati:

Se l'elemento del campo ha un attributo value specificato, allora value è il valore di quell'attributo; in caso contrario, lascia che value sia la stringa "on".

Pertanto le caselle di controllo non selezionate vengono ignorate durante la costruzione dei dati del modulo.

Un comportamento simile è richiesto in HTML4 . È ragionevole aspettarsi questo comportamento da tutti i browser conformi.

Le caselle di controllo pubblicano il valore "on" se e solo se la casella di controllo è selezionata. Istituito per catturare il valore della casella di controllo è possibile utilizzare input nascosti

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

È normale che i browser inviino i dati del valore di input della casella di controllo solo se controllati al momento dell'invio del modulo?

Sì, perché altrimenti non ci sarebbe un modo solido per determinare se la casella di controllo è stata effettivamente selezionata o meno (se ha cambiato il valore, il caso potrebbe esistere quando il valore desiderato se fosse controllato sarebbe lo stesso di quello che era scambiato con).

E se non viene fornito alcun valore, il valore predefinito è sempre "attivo"?

Altre risposte confermano che "on" è l'impostazione predefinita. Tuttavia, se non sei interessato al valore, usa solo:

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

Dalle specifiche HTML 4, che dovrebbero essere coerenti in quasi tutti i browser:

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

Le caselle di controllo (e i pulsanti di opzione) sono interruttori on / off che possono essere attivati ​​/ disattivati ​​dall'utente. Un interruttore è "on" quando è impostato l'attributo controllato dell'elemento di controllo. Quando viene inviato un modulo, solo i controlli "on" possono avere esito positivo.

Il successo è definito come segue:

Un controllo riuscito è "valido" per l'invio. Ogni controllo riuscito ha il suo nome di controllo associato al suo valore corrente come parte del set di dati del modulo inviato. Un controllo riuscito deve essere definito all'interno di un elemento FORM e deve avere un nome di controllo.

input type = "hidden" name = "is_main" value = "0"

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

così puoi controllare così come ho fatto nell'applicazione. se controlla quindi invia il valore 1 altrimenti 0

Nessuna delle risposte sopra mi ha soddisfatto. Ho trovato la soluzione migliore è includere un input nascosto prima di ogni input con lo stesso nome.

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

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

Quindi sul lato server, usando un piccolo algoritmo è possibile ottenere qualcosa in più che dovrebbe fornire HTML.

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

Questo sarà l'input non elaborato

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

E la funzione tornerà

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

Ho una pagina (modulo) che genera dinamicamente la casella di controllo, quindi queste risposte sono state di grande aiuto. La mia soluzione è molto simile a molte qui, ma non posso fare a meno di pensare che sia più facile da implementare.

Innanzitutto ho messo una casella di input nascosta in linea con la mia casella di controllo, vale a dire

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

Ora se tutti checkboxesnon sono selezionati, i valori restituiti dal campo nascosto saranno tutti disattivati.

Ad esempio, qui con cinque caselle di controllo inserite dinamicamente, il modulo presenta POSTSi seguenti valori:

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

Ciò mostra che solo le caselle di controllo 3a e 4a sono ono checked.

In sostanza il campo di input fittizio o nascosto indica semplicemente che tutto è spento a meno che non ci sia un "on" sotto l'indice off, che quindi ti dà l'indice di cui hai bisogno senza una singola riga di codice lato client.

.

Proprio come la variante ASP.NET, ad eccezione di inserire l'input nascosto con lo stesso nome prima della casella di controllo effettiva (con lo stesso nome). Verranno inviati solo gli ultimi valori. In questo modo, se una casella è selezionata, vengono inviati il ​​nome e il valore "on", mentre se è deselezionata, verranno inviati il ​​nome dell'input nascosto corrispondente e qualunque valore si desideri dare. Alla fine otterrai l'array $ _POST da leggere, con tutti gli elementi selezionati e deselezionati, valori "on" e "false", nessuna chiave duplicata. Facile da elaborare in PHP.

Avendo lo stesso problema con le caselle di controllo non selezionate che non verranno inviate durante l'invio dei moduli, sono uscito con un'altra soluzione che rispecchiare gli elementi della casella di controllo.

Ottenere tutte le caselle di controllo deselezionate con

var checkboxQueryString;

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

Ho risolto il problema con questo codice:

Modulo HTML

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

e la funzione javascript modificando il modulo del valore della casella di controllo:

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

e il server ha verificato se il post di dati è "on" o "off". Ho usato il 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));
        }