The <input type="checkbox"> defines a checkbox. The checkbox is shown as a square box that is ticked (checked) when activated. Checkboxes are used to let a user select one or more options of a limited number of choices. Tip: Always add the <label> tag for best accessibility practices!
Return Value: It returns a string value which represent the value of the value attribute of a input checkbox field.
Checking if a checkbox is checked First, select the checkbox using a DOM method such as getElementById() or querySelector() . Then, access the checked property of the checkbox element. If its checked property is true , then the checkbox is checked; otherwise, it is not.
Yes, standard behaviour is the value is only sent if the checkbox is checked. This typically means you need to have a way of remembering what checkboxes you are expecting on the server side since not all the data comes back from the form.
The default value is always "on", this should be consistent across browsers.
This is covered in the W3C HTML 4 recommendation:
Checkboxes (and radio buttons) are on/off switches that may be toggled by the user. A switch is "on" when the control element's checked attribute is set. When a form is submitted, only "on" checkbox controls can become successful.
In HTML, each <input />
element is associated with a single (but not unique) name and value pair. This pair is sent in the subsequent request (in this case, a POST request body) only if the <input />
is "successful".
So if you have these inputs in your <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" />
Will generate these name+value pairs which will be submitted to the server:
one=foo
three=first
three=second
five=baz
eight=grault
Notice that:
two
and six
were excluded because they had the disabled
attribute set.three
was sent twice because it had two valid inputs with the same name.four
was not sent because it is a checkbox
that was not checked
six
was not sent despite being checked
because the disabled
attribute has a higher precedence.seven
does not have a name=""
attribute sent, so it is not submitted.With respect to your question: you can see that a checkbox that is not checked will therefore not have its name+value pair sent to the server - but other inputs that share the same name will be sent with it.
Frameworks like ASP.NET MVC work around this by (surreptitiously) pairing every checkbox
input with a hidden
input in the rendered HTML, like so:
@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 check the checkbox, then the following will be sent to the server:
SomeBooleanProperty=false
If the user does check the checkbox, then both will be sent:
SomeBooleanProperty=true
SomeBooleanProperty=false
But the server will ignore the =false
version because it sees the =true
version, and so if it does not see =true
it can determine that the checkbox was rendered and that the user did not check it - as opposed to the SomeBooleanProperty
inputs not being rendered at all.
If checkbox isn't checked then it doesn't contribute to the data sent on form submission.
HTML5 section 4.10.22.4 Constructing the form data set describes the way form data is constructed:
If any of the following conditions are met, then skip these substeps for this element: [...]
The field element is an input element whose type attribute is in the Checkbox state and whose checkedness is false.
and then the default valued on
is specified if value
is missing:
Otherwise, if the field element is an input element whose type attribute is in the Checkbox state or the Radio Button state, then run these further nested substeps:
If the field element has a value attribute specified, then let value be the value of that attribute; otherwise, let value be the string "on".
Thus unchecked checkboxes are skipped during form data construction.
Similar behavior is required under HTML4. It's reasonable to expect this behavior from all compliant browsers.
Checkboxes are posting value 'on' if and only if the checkbox is checked. Insted of catching checkbox value you can use hidden inputs
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" />
Is it standard behaviour for browsers to only send the checkbox input value data if it is checked upon form submission?
Yes, because otherwise there'd be no solid way of determining if the checkbox was actually checked or not (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).
And if no value data is supplied, is the default value always "on"?
Other answers confirm that "on" is the default. However, if you are not interested in the value, just use:
if (isset($_POST['the_checkbox'])){
// name="the_checkbox" is checked
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With