Question

我有一个带有contenteditable元素和复选框的webform，在提交时返回周围div的innerHTML（我无法改变这一点）。出于显而易见的原因，这意味着提交了contenteditable元素的更改，而复选框状态的更改则没有，因为作为DOM属性，它们不是HTML属性的一部分。

我找到了一个相对简单的解决方法，即将click-event附加到复选框周围的元素并修改innerHTML。

像这样：http://jsfiddle.net/9Lkoaq3y/

$( ".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("");
});

然而，我想知道是否有更多的故障保护，优雅和一般的方法来处理这个问题，这也适用于其他表单元素。简而言之，我不喜欢我丑陋的黑客。

此处已提出相关问题：innerHTML not being updated after changing value of input (checked = true/false/"checked")但没有优雅的解决方案。

Answer 1

我能找到的最简单的解决方案（只是为了结束这个未解决的问题），就是在每次复选一个值时，将checked属性写入所有复选框和单选按钮的checked属性。

这个简短的jquery-code处理这个问题，并确保只有那些输入元素的属性发生了变化，而属性和属性还没有对应。

$("input[type=checkbox], input[type=radio]").change(function () {
     $("input[checked='checked']:not(:checked)").each(function (index) {
         $(this).removeAttr('checked');
     });
     $("input:not([checked='checked']):checked").each(function (index) {
         $(this).attr('checked', 'true');
     });
});

将输入复选框的DOM属性更改反映到innerHTML属性中

1 个答案: