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>