Reflect DOM property change of input checkbox into innerHTML attribute

I have a webform with contenteditable elements and checkboxes, which on submission returns the innerHTML of the surrounding div (nothing I can change about this). For obvious reasons, this means that changes of the contenteditable elements are submitted, whereas changes of the checkbox-states are not, because as DOM properties, they are not part of the HTML attributes.

I've found a relatively simple workaround, which is to append a click-event to the elements surrounding the checkboxes and modifying the innerHTML.

Like so: http://ift.tt/1zpLFv6

$( ".checkboxes" ).click(function() {
  if (this.firstChild.checked) this.innerHTML=this.innerHTML.split("input").join("input checked=\"checked\"");
  else this.innerHTML=this.innerHTML.split("checked=\"checked\" ").join("");
});

I was wondering, however, whether there was a more failsafe, elegant and general way to approach this, which would also work on other form elements. In short, I don't like my ugly hack.

A related question has been asked here: innerHTML not being updated after changing value of input (checked = true/false/"checked") but without an elegant solution.