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

Posted 2023-05-07

【中文标题】将输入复选框的 DOM 属性更改反映到 innerHTML 属性

【英文标题】：Reflect DOM property change of input checkbox into innerHTML attribute

【发布时间】：2015-05-01 03:59:06

【问题描述】：

我有一个带有 contenteditable 元素和复选框的网络表单，它在提交时会返回周围 div 的 innerhtml（对此我无能为力）。 出于显而易见的原因，这意味着提交 contenteditable 元素的更改，而不会提交复选框状态的更改，因为作为 DOM 属性，它们不是 HTML 属性的一部分。

我找到了一个相对简单的解决方法，即在复选框周围的元素上附加一个点击事件并修改 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("");
);

不过，我想知道是否有一种更安全、更优雅、更通用的方法来解决这个问题，这也适用于其他表单元素。 简而言之，我不喜欢我丑陋的 hack。

这里提出了一个相关问题：innerHTML not being updated after changing value of input (checked = true/false/"checked")，但没有一个优雅的解决方案。

【参考方案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');
     );
);