javascript - 添加到 DOM 时复选框选中的值会发生变化

Question

我正在根据从其他地方提取的值动态创建一系列复选框，并且我试图保持代码通用。这些复选框位于 JavaScript 中的一个大 UI 部分中，可以一次性添加到 DOM 中，从而尽可能避免锁定 UI。

最初需要选中某些复选框，但是将 HTMLElement 的值设置为 true 不起作用。一旦附加了整个 HTML 部分，复选框就不再被选中。

有谁知道原因或有解决办法吗？

这是一个说明其工作原理的小示例

addFilter = function (spec, all_vis){ 
     var contain_div = document.createElement('div');
     var visualisation_spec = document.createElement('div');
     for(var i=0;i< all_vis.length; i++) {
         if(contains(spec.vis_list, all_vis[i])){ // This is a custom function 
              var check = document.createElement('input')
              check.type = 'checkbox';
              check.value = all_vis[i];
              check.checked = true;
              visualisation_spec.append(check);
              visualisation_spec.innerHTML += all_vis[i] +"<br>"//this isnt quite how i 
                                                               //create the label 
         }
     }
     contain_div.append(visualisation_spec)
      // .... MORE INTERFACE CREATION 
     ...
     return contain_div;
     // This interface segment is returned and attached to others before being 
     // added to the DOM
}

请不要使用 JQuery!

Answer 1

您可以尝试使用 setAttribute('checked', true) - 因为您使用 .checked 它实际上并没有添加属性，然后因为您正在混合它附加到innerHTML，这可能就是你失去选中状态的原因

.checked 无需 innerHTML

即可工作

var check = document.createElement('input');
check.type = 'checkbox';
check.value = 'test';
check.checked = true

document.body.append(check);

对于 innerHTML，checked 不起作用，因为实际上尚未设置任何属性，并且它可能会将现有内容更改为字符串以将新内容附加到:

var check = document.createElement('input');
check.type = 'checkbox';
check.value = 'test';
check.checked = true

document.body.append(check);
document.body.innerHTML += 'test'

手动设置属性应该可行

var check = document.createElement('input');
check.type = 'checkbox';
check.value = 'test';
check.setAttribute('checked', true);

document.body.append(check);
document.body.innerHTML += 'test'