HTML checkbox elements are only submitted if they're checked?

Question

I'm trying to work on an existing website and I've found a bug, but I'm not sure why it's a bug or how to work around it.

The website basically lists some commercial properties that are for lease in one city. There's a class which grabs the listings from the database and creates an object out of each. In each object is an array of images which are associated with that property.

When the user edits a listing, they get an edit page which has a list of the images, and a "delete" checkbox next to them. The checkboxes all have the same name, so that when they are submitted back to the server, the app gets an array of the images to be deleted.

What's supposed to happen, is that the app has this array of on/off values (where on = delete), and the index of each value in the array corresponds to the index of an image in the listing object -- when one of the values is "on", the filename in the images array corresponding to that "on" value is deleted from the filesystem, and that image is removed from the database.

However, when the form is submitted, the app gets a 0-indexed array of only the checked checkboxes. So if I set three arbitrary images for deletion, the app would get

Array {
   [0] => "on",
   [1] => "on",
   [2] => "on"
}

This obviously doesn't work, the first 3 images in the listing will be deleted regardless of which checkboxes are set.

How can I fix this? I would like to avoid naming each checkbox (delete_1, delete_2, delete_3, etc) as the system is already built to work with all the checkboxes having the same name. Is there a way I can force all of the checkboxes to be submitted with either "on" or "off?"

Answer 1

There is no way to force, but you could just add a hidden right before checkbox with the same name and needed value:

<input type="hidden" name="delete[42]" value="off" />
<input type="checkbox" name="delete[42]" value="on" />