HTML: Checkbox 🗹

Here's how to create HTML checkboxes.

Single Check Box

Result:

<input id="checkbox1" type="checkbox" name="married" value="married">
<label for="checkbox1">Married</label>

<p>Result:<br /> <span id="showbox1"></span></p>

value="…" is optional. If omitted, the default value is "on".

"use strict";
{
    const checkbox1 = document.getElementById('checkbox1');
    const showbox1 = document.getElementById('showbox1');
    const f_update = (() => {
        showbox1.textContent = `checked: ${checkbox1.checked}. Value is: ${checkbox1.value}`;
    });
    checkbox1.addEventListener('input', f_update, false);
    f_update();
}

In JavaScript, property checked return true if it is checked, else false.

Multi Selection Check Boxes

Result:

<label><input type="checkbox" name="abc38399" value="aa" checked>aa</label>
<label><input type="checkbox" name="abc38399" value="bb" checked>bb</label>
<label><input type="checkbox" name="abc38399" value="cc">cc</label>
<label><input type="checkbox" name="abc38399" value="dd">dd</label>

<p>Result:<br /> <span id="showbox2"></span></p>

{
    const showbox2 = document.getElementById('showbox2');
    const f_update = (() => {
        let result = [];
        Array.from(document.querySelectorAll('input[name="abc38399"]:checked'))
            .forEach(((x) => { result.push(x.value); }));
        showbox2.textContent = result.join(', ');
    });
    // add event
    Array.from(document.querySelectorAll('input[name="abc38399"]'))
        .forEach(((x) => { x.addEventListener('input', f_update, false); }));
    f_update();
}