How to submit multiple unchecked checkboxes

Question

If a checkbox is unchecked when its form is submitted, there is no value submitted to the server to represent its unchecked state (e.g. value=unchecked); the value is not submitted to the server at all.

If you wanted to submit a default value for the checkbox when it is unchecked, you could include an <input type="hidden"> inside the form with the same name and a value of false for example.

This solution...

<form>
  <input type='hidden' name='selfdestruct' value='0'>
  <input type='checkbox' name='selfdestruct' value='1'>
</form>

...doesn't work for me because it's using name as a key and value as that key's value, whereas I need name to be the identifier, value to be the key and somehow always get that key's value as true or false.

I've got around 200 checkboxes that represent a user's weekly availability, like so:

<div>
    <fieldset>
        <legend>Monday</legend>
        <label>7 - 8
            <input type="checkbox" name="schedule" value="Monday-7" />
        </label>
        <label>8 - 9
            <input type="checkbox" name="schedule" value="Monday-8" />
        </label>
        ...
    </fieldset>
    <fieldset>
        <legend>Tuesday</legend>
        <label>7 - 8
            <input type="checkbox" name="schedule" value="Tuesday-7" />
        </label>
        <label>8 - 9
            <input type="checkbox" name="schedule" value="Tuesday-8" />
        </label>
        ...
    </fieldset>
   ...
</div>

Does this answer your question? [POST unchecked HTML checkboxes](https://stackoverflow.com/questions/1809494/post-unchecked-html-checkboxes) — Toastrackenigma, Mar 01 '23 at 10:24
No, because my `value` attribute isn't working as a boolean like in that solution, but as a key whose value needs to be true or false. — André Casal, Mar 01 '23 at 10:39
You're essentially wanting three values: the name, the value (your key), and then its value. That isn't possible in HTML alone. I'd recommend submitting the form via JavaScript, and then you can send the data in any form that you want, e.g. `{schedule: {"Tuesday-7": true, "Tuesday-8": false}}` etc. Some of the answers in the question I linked might still be helpful, because they show how you can send a different form response using JS. — Toastrackenigma, Mar 01 '23 at 10:56
Why can't your back-end read what keys are available from the database? Alternative phrasing: Why doesn't your back-end know what checkboxes it serves to the front-end? — Oskar Grosser, Mar 01 '23 at 12:09
@Toastrackenigma Yeah, it's a shame HTML checkboxes don't work the same as other inputs. Sending a JSON object would be nice except I'm using [remix-validity-state](https://github.com/brophdawg11/remix-validity-state) which needs the checkboxes submitted. — André Casal, Mar 01 '23 at 13:22
@OskarGrosser I have a guarantee that the frontend data comes with the right shape (otherwise an error is thrown), it's just that it's not complete with the unchecked/false values. Going to the DB just to get the false values seems unnecessary. — André Casal, Mar 01 '23 at 13:22
Well checkboxes do not have multiple states so what you want to do is not possible. If you want some sort of state, you would need to code something with hidden fields where javascript sets and removes the values. — epascarello, Mar 01 '23 at 14:05
@epascarello Yeah, I'm researching alternatives. I'll post an update soon. — André Casal, Mar 01 '23 at 14:11

score 0 · Answer 1 · answered Mar 02 '23 at 16:11

I ended up encoding the key-value pairs on the value attribute of the <input type="checkbox"> and hard-coding the keys and values on the backend.

Frontend:

<input type="checkbox" name="schedule" value="monday-7" />
<input type="checkbox" name="schedule" value="monday-8" />
<input type="checkbox" name="schedule" value="monday-9" />
...
<input type="checkbox" name="schedule" value="tuesday-7" />
<input type="checkbox" name="schedule" value="tuesday-8" />
<input type="checkbox" name="schedule" value="tuesday-9" />
...

Backend:

// schedule: string[]
    const days = [
        'Monday',
        'Tuesday',
        'Wednesday',
        'Thursday',
        'Friday',
        'Saturday',
        'Sunday',
    ]

    const times = [
        7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23,
    ]

    // Extract update objects from schedule object
    const schedule: UserSchedule[] = days.map((day) => ({
        day,
        times: times.map((time) => ({
            time,
            free: scheduleStringArray.includes(`${day}-${time}`),
        })),
    }))

How to submit multiple unchecked checkboxes

1 Answers1