Problem
Is it standard for browsers to only deliver checkbox input value data if the box is checked when the form is submitted?
Is the default value always “on” if no value data is provided?
Is this behavior consistent across all browsers, assuming the above is correct?
Asked by Mark
Solution #1
Yes, it is usual practice to send the value only if the checkbox is selected. Because not all of the data from the form is returned, you’ll need a way to remember which checkboxes you’re expecting on the server side.
The default option is always “on,” which should be the same across all browsers.
The W3C HTML 4 recommendation addresses this:
Answered by John C
Solution #2
Each input /> element in HTML has a single (but not unique) name and value pair associated with it. Only if the input /> is “successful” is this pair transmitted in the succeeding request (in this case, a POST request body).
As a result, if you have these inputs in your 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" />
These name+value pairs will be generated and delivered to the server:
one=foo
three=first
three=second
five=baz
eight=grault
Notice that:
In response to your query, you can see that a checkbox that is not ticked will not have its name+value pair sent to the server, but other inputs with the same name will.
Frameworks like ASP.NET MVC get around this by (deliberately) associating each checkbox input with a hidden input in the produced HTML, as shown below:
@Html.CheckBoxFor( m => m.SomeBooleanProperty )
Renders:
<input type="checkbox" name="SomeBooleanProperty" value="true" />
<input type="hidden" name="SomeBooleanProperty" value="false" />
If the user does not click the checkbox, the server will receive the following information:
SomeBooleanProperty=false
If the user selects the checkbox, the following messages will be sent:
SomeBooleanProperty=true
SomeBooleanProperty=false
The server, on the other hand, will ignore the =false version since it sees the =true version, and if it doesn’t see =true, it may deduce that the checkbox was drawn and the user didn’t check it – as opposed to the SomeBooleanProperty inputs not being rendered at all.
Answered by Dai
Solution #3
If the item is not ticked, the information is not included in the data provided with the form submission.
Section 4.10.22.4 of HTML5 The process of constructing the form data set is described as follows:
If the value is missing, the default value is specified:
As a result, unchecked checkboxes are skipped while constructing form data.
HTML4 necessitates similar behavior. It’s realistic to anticipate all conforming browsers to behave in this manner.
Answered by Adam Zalcman
Solution #4
Yes, because there would be no reliable way of knowing whether or not the item was actually checked (if it changed the value, the case may exist when your desired value if it were checked would be the same as the one that it was swapped to).
Other responses reaffirm that “on” is the default setting. If you don’t care about the value, though, simply type:
if (isset($_POST['the_checkbox'])){
// name="the_checkbox" is checked
}
Answered by Jay
Solution #5
If and only if the checkbox is ticked, the value is posted as ‘on’. Instead of catching checkbox values, hidden inputs might be used.
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" />
Answered by Lanister
Post is based on https://stackoverflow.com/questions/11424037/do-checkbox-inputs-only-post-data-if-theyre-checked