DONT ADD ANYTHING HERE!

  1. input elements of type checkbox are rendered by default as boxes that are checked (ticked) when activated
  2. value
    1. The value attribute is one which all input elements share; however, it serves a special purpose for inputs of type checkbox
    2. When a form is submitted, only checkboxes which are currently checked are submitted to the server, and the reported value is the value of the value attribute.
    3. If the value is not otherwise specified, it is the string on by default.
  3. checked
    1. A boolean attribute indicating whether this checkbox is checked by default (when the page loads)
    2. It does not indicate whether this checkbox is currently checked: if the checkbox's state is changed, this content attribute does not reflect the change. (Only the HTMLInputElement's checked IDL attribute is updated.)
    3. Unlike other input controls, a checkbox's value is only included in the submitted data if the checkbox is currently checked
    4. If it is, then the value of the checkbox's value attribute is reported as the input's value, or on if no value is set

Example

HTML

<form id="form_one">
    <fieldset>
        <legend>Choose your interests</legend>
        <div>
            <input type="checkbox" id="coding" name="param1" value="coding" checked />
            <label for="coding">Coding</label>
        </div>
        <div>
            <input type="checkbox" id="music" name="param2" value="music" />
            <label for="music">Music</label>
        </div>
        <div>
            <input type="submit">
        </div>
    </fieldset>
</form>
<div>
    <output id="out-choice1"></output>
    <output id="out-choice2"></output>
</div> 
javascript

// form
async function sendData() {

    const formData = new FormData(form_one);

    try {
        const response = await fetch("https://php.tomgdow.com", {
            method: "POST",
            body: formData
        });

        let result = await response.text();
        console.log(result);
        let responseArray = result.split('&');
        document.getElementById('out-choice1').value = responseArray[0];
        document.getElementById('out-choice2').value = responseArray[1];

    } catch (e) {
        console.error(e);
    }
}

document.getElementById('form_one').addEventListener('submit', function (event) {

    event.preventDefault();

    sendData();

}); 

Browser

Choose your interests

References