反映 DOM 属性将输入复选框更改为 innerHTML 属性

Question

我有一个包含内容可编辑元素和复选框的网络表单，在提交时 returns 周围 div 的内部 HTML（对此我无能为力）。出于明显的原因，这意味着提交了 contenteditable 元素的更改，而复选框状态的更改则没有，因为作为 DOM 属性，它们不是 HTML 属性的一部分。

我找到了一个相对简单的解决方法，就是将点击事件附加到复选框周围的元素并修改内部HTML。

像这样：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

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

这个简短的 jquery 代码负责处理此问题，并确保只有那些输入元素的属性在属性和属性尚未对应的情况下发生更改。

$("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 属性

Reflect DOM property change of input checkbox into innerHTML attribute

javascript

checkbox

jquery

dom

innerhtml

反映 DOM 属性 将输入复选框更改为 innerHTML 属性

Reflect DOM property change of input checkbox into innerHTML attribute

javascript

checkbox

jquery

dom

innerhtml

反映 DOM 属性将输入复选框更改为 innerHTML 属性