Html checkbox set value

Note: Radio buttons are similar to checkboxes, but with an important distinction — radio buttons are designed for selecting one value out of a few, whereas checkboxes allow you to turn single values on and off. Where multiple controls exist, radio buttons allow one to be selected out of them all, whereas checkboxes allow multiple values to be selected.

Value	A DOMString representing the value of the checkbox.
Events	change and input
Supported common attributes	checked
IDL attributes	checked and value
Methods	select()

Value

A DOMString representing the value of the checkbox. This is never seen on the client-side, but on the server this is the value given to the data submitted with the checkbox’s name . Take the following example:

   Subscribe to newsletter?

In this example, we’ve got a name of subscribe , and a value of newsletter . When the form is submitted, the data name/value pair will be subscribe=newsletter . If the value attribute was omitted, the submitted data would be given a default value of on , so the submitted data in that case would be subscribe=on .

Note: If a checkbox is unchecked when its form is submitted, there is no value submitted to the server to represent its unchecked state (e.g. value=unchecked ); the value is not submitted to the server at all.

Using checkbox inputs

We already covered the most basic use of checkboxes above. Let’s now look at the other common checkbox-related features and techniques you’ll need.

Handling multiple checkboxes

The example we saw above only contained one checkbox; in many real examples you’ll be likely to encounter multiple checkboxes. If they are completely unrelated, then you can just deal with them all separate like we showed above. If however they are all related, things are not quite so simple. For example, in the following demo we include multiple checkboxes to allow the user to select what interests they like (see the full version in the Examples section).

 Choose your interests  Coding 
  Music

In this example you will see that we’ve given each checkbox the same name . If both checkboxes are checked and then the form is submitted, you’ll get a string of name/value pairs submitted like this: interest=coding&interest=music . When this data reaches the server-side, you should be able to capture it as an array of related values and deal with it appropriately — see Handle Multiple Checkboxes with a Single Serverside Variable, for example.

Checking boxes by default

To make a checkbox checked by default, you simply give it the checked attribute. See the below example:

 Choose your interests  Coding 
  Music

Providing a bigger hit area for your checkboxes

Indeterminate state checkboxes

There exists an indeterminate state of checkboxes, one in which it is not checked or unchecked, but undetermined. This is set using the HTMLInputElement object’s indeterminate property via JavaScript (it cannot be set using an HTML attribute):

inputInstance.indeterminate = true;

If none are checked, the recipe name’s checkbox is set to unchecked.
If one or two are checked, the recipe name’s checkbox is set to indeterminate .
If all three are checked, the recipe name’s checkbox is set to checked .

So in this case the indeterminate state is used to state that collecting the ingredients has started, but the recipe is not yet complete.

Note: If you submit a form with an indeterminate checkbox, the same thing happens as if the form were unchecked — no data is submitted to represent the checkbox.

Validation

Checkboxes don’t participate in constraint validation; they have no real value to be constrained.

Examples

The following example is an extended version of the «multiple checkboxes» example we saw above — it has more standard options, plus an «other» checkbox that when checked causes a text field to appear to enter the «other» option into. This is achieved via a simple block of JavaScript. The example also includes some CSS to improve the styling.

  Choose your interests  Coding 
  Music 
  Art 
  Sports 
  Cooking 
  Other

html < font-family: sans-serif; >form < width: 600px; margin: 0 auto; >div < margin-bottom: 10px; >fieldset < background: cyan; border: 5px solid blue; >legend

var otherCheckbox = document.querySelector('input[value="other"]'); var otherText = document.querySelector('input[id="otherValue"]'); otherText.style.visibility = 'hidden'; otherCheckbox.onchange = function() < if(otherCheckbox.checked) < otherText.style.visibility = 'visible'; otherText.value = ''; >else < otherText.style.visibility = 'hidden'; >>;

Specifications

Browser compatibility

Feature	Android	Firefox Mobile (Gecko)	IE Mobile	Opera Mobile	Safari Mobile
Basic support	(Yes)	4.0 (2.0)	(Yes)	(Yes)	(Yes)

How to create and use a HTML checkbox ?

The HTML checkbox form control can only have two checked states (via its checked attribute):

If you want to get always a value for a property (ie false or true), you can:

Base Demo

This demo shows that if the checkbox is checked, the property given by the name attribute (with value property-name ) will be added to the data send by the form with the default value of on

Syntax

The syntax of a checkbox is:

checked is the optional checked attribute (default to false ) that sets the state of the checkbox (How to change it programmatically)

Value

If a checkbox is unchecked when its form is submitted, the field data is just not sent.

There is no not-checked value

Default

The default value is on and never changes.

document.querySelector("input").addEventListener("click", function()< console.log(`The checkbox is checked ? $`); console.log(`The value is $`); >);

If Set

If the value attribute is set, this value will be send instead

document.querySelector("form").addEventListener("submit", function(event)< event.preventDefault(); let formData = new FormData(this); let i = 0; for (let entry of formData) < i++; console.log(`Entry $`); console.log(entry); > console.log(`Number of field sent: $`); >);

Visual / Styling

Css

Switch

  Checked switch checkbox input

Button

You may navigate with the tab key because a input (and alos checkbox) is by default focusable. You still may change the order of navigation via the tabindex value.

the third tab will get you on the next interactive element in the iframe (ie a link) — the code is rendered in a iframe

How to

How to change the state programmatically

The checked attribute of the input checkbox element permits:

function toggleCheckBox(event) < event.preventDefault(); if (event.target.checkbox.checked)< event.target.checkbox.checked = false; event.target.button.innerHTML= "Check the checkbox"; >else < event.target.checkbox.checked = true; event.target.button.innerHTML= "Uncheck the checkbox"; >>

How to use a checkbox to enable or disable other Form elements

Example of a legend with a checkbox that controls whether or not the fieldset is enabled

     Use Club Card  Name on card:
 Card number:
 Expiry date:

Aria Role

With aria role, you need to handle programmatically the state of each attribute as seen in this example 3)

[role='checkbox'][aria-checked='false']:before < content: '\00a0\00a0'; width: 14px; height: 14px; border: 1px solid hsl(0, 0%, 66%); border-radius: 0.2em; background-image: linear-gradient(to bottom, hsl(300, 3%, 93%), #fff 30%); >[role='checkbox'][aria-checked='true']:before < content: url('/_media/web/html/checkbox_checked.png'); >[role='checkbox'].focus

 Sandwich Condiments  Lettuce
 Tomato
 Mustard
 Sprouts

Documentation / Reference

FormData is a web api object that represent the data of a form that should be send if the form is submited. Therefore if you have a checkbox that is not checked, formdata will not collect it. You can.

checked is an HTML attribute that indicates via its value (true or false — default to true) if the form control element is checked. It’s used: in a checkbox or radio button select optionselected.

control form elements are element that are used specifically inside a form. They are used: to specify a key and a value. to layout the form to submit or reset it field set [optional] that.

An inputinput element of a form control that permits to define a scalar value inputFull list Ref Doc The type attribute defined: the default behavior the design of the element. and the.

HTML The label html element represents a caption for a control item in a form (user interface). idfor A click on the label: will bring focus on the control element. propagates to the control.

legend is an element that represents a caption for the fieldset element. Example of a legend with a checkbox that controls whether or not the fieldset is enabled .

A radio represents a serie of mutually-exclusive choices in a form. It is an input element of type radio. A radio is round to distinguish from the square checkbox. As the checkbox, the state.

This page shows you how you can create a checkbox in React. This example is written in JSX and shows you a controlled component. The react forms components input accept a value attribute that is used.

Источник

Html checkbox set value