HTML Form tags, Form, input (radio, checkbox) and select
3. Checkboxes
3.2. Checkboxes options with the same names but different values
In
the example above, we assigned a unique name for each option with a unique
value. When we need to retrieve the values of all checked options, we have to
check all names if they are checked in order to get all checked options. To
make retrieving of values easier, we can set all options in the same category
to have one name. By using a single name, we can iterate through the choices
like in an array. See the code snippet below for a set of checkbox options with
the same name.
<form onsubmit="return myFunction();">
<h2> Add-ons for my milktea </h2>
<input type="checkbox" id="creamCheese" name="choices" value="Cream Cheese">
<label for="creamCheese"> Cream Cheese</label><br>
<input type="checkbox" id="pearls" name="choices" value="Pearls">
<label for="pearls"> Pearls </label><br>
<input type="checkbox" id="coffeeJelly" name="choices" value="Coffee Jelly">
<label for="coffeeJelly"> Coffee Jelly</label><br><br>
<input type="submit"></input>
</form>