HTML: Checkbox

Here's how to create HTML checkboxes.

Single Check Box

Result:

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

<p>
<span id="result36261"></span>
</p>

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

{
const cb = document.getElementById ('checkbox19044');
const showBox = document.getElementById ('result36261');

const f_update = ((x) => {
showBox .textContent = `checked: ${cb.checked}. Value is: ${cb.value}`;
});

cb. addEventListener ('input', f_update , false);

f_update();
}

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

Multi Selection Check Boxes

Result:

<div>

<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>

</div>

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

{
const showBox = document.getElementById ('result56581');

const f_update = (() => {
let result = [];
Array.from ( document.querySelectorAll ( 'input[name="abc38399"]:checked' ) )
.forEach (((x) => { result.push(x.value); }) );
showBox .textContent = result;
});

// add event
Array.from ( document.querySelectorAll ( 'input[name="abc38399"]' ) )
 .forEach (((x) => { x.addEventListener ('input', f_update , false); }));

f_update();
}