32

Suppose this checkbox snippet:

<input type="checkbox" value="1">Is it worth?</input>

Is there any reason to statically define the value attribute of checkboxes in HTML? What does it mean?

Ciro Santilli OurBigBook.com
  • 347,512
  • 102
  • 1,199
  • 985
Metalcoder
  • 2,094
  • 3
  • 24
  • 30
  • 2
    http://www.w3schools.com/jsref/prop_checkbox_value.asp W3Schools has wonderful information about checkboxes. – Leeish Jan 14 '13 at 17:57
  • empty params are OK by the URI standard: http://stackoverflow.com/questions/4557387/is-a-url-query-parameter-valid-if-it-has-no-value but I think that forms ignore inputs without value (even though it is useless when you don't have multiple checkboxes grouped by a single `name`), even though it is valid HTML to omit `value`. – Ciro Santilli OurBigBook.com May 31 '16 at 21:59

5 Answers5

30

I hope I understand your question right.

The value attribute defines a value which is sent by a POST request (i.e. You have an HTML form submitted to a server). Now the server gets the name (if defined) and the value. 

<form method="post" action="urlofserver">
    <input type="checkbox" name="mycheckbox" value="1">Is it worth?</input>
</form>

The server would receive mycheckbox with the value of 1.

in PHP, this POST variable is stored in an array as $_POST['mycheckbox'] which contains 1.

HardlyNoticeable
  • 497
  • 9
  • 26
user1116033
  • 474
  • 5
  • 9
  • 17
    I think the questioner was asking why the checkbox has a value; rather than a checked state. – HardlyNoticeable Jun 12 '15 at 16:59
  • So do we need to set both `value` and `checked` attributes like `is_active }} checked={{ $user->is_active }}>` ? – Shanika Ediriweera May 23 '19 at 00:27
  • 2
    The OP is gone, but this answer ought to be updated with information about the default value if the "value" attribute is left out (or if the "value" attribute is required, what happens then (could be browser/version dependent)). Also, what is the recommended value (convention)? [Another answer](https://stackoverflow.com/questions/14323899/what-does-the-value-attribute-mean-for-checkboxes-in-html/38914478#38914478) here claims the default value is "on". – Peter Mortensen Nov 28 '19 at 21:10
12

I just wanted to make a comment on Adriano Silva's comment. In order to get what he describes to work you have to add "[]" at the end of the name attribute, so if we take his example the correct syntax should be:

<input type = "checkbox" name="BrandID[]" value="1">Ford</input>
<input type = "checkbox" name="BrandID[]" value="2">GM</input>
<input type="checkbox" name="BrandId[]" value="3">Volkswagen</input>

Then you use something like: $test = $_POST['BrandID']; (Mind no need for [] after BrandID in the php code). Which will give you an array of values, the values in the array are the checkboxes that are ticked's values.

Hope this helps! :)

Nift
  • 352
  • 4
  • 10
7

One reason is to use the ease of working with values ​​in the system.

<input type="checkbox" name="BrandId" value="1">Ford</input>
<input type="checkbox" name="BrandId" value="2">GM</input>
<input type="checkbox" name="BrandId" value="3">Volkswagen</input>
Adriano Silva
  • 2,518
  • 1
  • 17
  • 29
  • 6
    And what this means? If someone checks Ford and GM, for example, what happens? – Metalcoder Jan 14 '13 at 18:52
  • 7
    On the server side you get an array with the name BrandId with selected values (E.g 1,2) – Adriano Silva Jan 14 '13 at 19:04
  • @Metalcoder keep in mind, PHP will put the values into an array under the key "BrandId", thus if you check all them you will end up with `array('BrandId'=>'3')` while in reality the browser sent this: `BrandId=1&BrandId=2&BrandId=3` – Timo Huovinen Mar 15 '14 at 21:02
  • @TimoHuovinen yes, the name should be BrandId[] in order to get all values, right? – Metalcoder Mar 16 '14 at 02:50
  • @Metalcoder only if you use the `$_POST` variable, but you don't need the square brackets if you use `$post_str=file_get_contents("php://input");` for example. (There is also `php://stdin` btw) – Timo Huovinen Mar 16 '14 at 07:58
  • What is this for? For checkboxes to work like radio buttons? – Peter Mortensen Nov 28 '19 at 21:13
4

When the form is submitted, the data in the value attribute is used as the value of the form input if the checkbox is checked. The default value is "on".

$('form').on('change', update).trigger('change')

function update() {
  var form = $(this)
  form.find('output').text('→ ' + form.serialize())
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form>
  <input type="checkbox" name="foo">
  <output></output>
</form>

<form>
  <input type="checkbox" name="foo" checked>
  <output></output>
</form>

<form>
  <input type="checkbox" name="foo" value="1" checked>
  <output></output>
</form>

<form>
  <input type="checkbox" name="foo" value="bananas" checked>
  <output></output>
</form>
Alf Eaton
  • 5,226
  • 4
  • 45
  • 50
  • Re *'The default value is "on"'*: Do you have a source for that (claim)? – Peter Mortensen Nov 28 '19 at 21:15
  • 1
    http://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#attr-value "If the value is not otherwise specified, it is the string `on` by default." – Alf Eaton Nov 28 '19 at 21:27
  • https://www.w3.org/TR/html52/sec-forms.html#sec-constructing-the-form-data-set "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"." – Alf Eaton Nov 28 '19 at 21:30
1

For the sake of a quick glance answer, from MDN

when a form is submitted, only checkboxes which are currently checked are submitted to the server, and the reported value is the value of the value attribute

It can be confusing because seeing something like <input type='checkbox' name='activated' value='1'> might lead one to believe that the 1 means true and it will be treated as though it is checked, which is false. The checked attribute itself also only determines if the checkbox should be checked by default on page load, not whether it is currently checked and thus going to be submitted.

AFOC
  • 699
  • 6
  • 15