Отражение изменения свойства DOM флажка ввода в атрибут innerHTML

У меня есть веб-форма с редактируемыми элементами и флажками, которая при отправке возвращает innerHTML окружающего div (я ничего не могу изменить в этом). По понятным причинам это означает, что изменения элементов 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("");
});

Однако мне было интересно, существует ли более безопасный, элегантный и общий подход к этому, который также работал бы с другими элементами формы. Короче говоря, мне не нравится моя уродливая поделка.

Здесь был задан связанный с этим вопрос: innerHTML не обновляется после изменения значения ввода (checked = true/false/checked), но без элегантного решения.


javascript checkbox jquery dom innerhtml
person mheim    schedule 28.02.2015    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Самое простое решение, которое я смог найти (просто чтобы закончить этот вопрос без ответа), состояло в том, чтобы записать свойство checked в атрибут checked всех флажков и радиокнопок каждый раз, когда один из них меняет значение.

Этот краткий 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');
     });
});
person mheim    schedule 15.05.2015