JavaScript动态操作label的for属性

JavaScript动态操作label的for属性

一句话解决

使用htmlFor

用例

  my_label.htmlFor = input_id;

起因

需求是需要动态添加一个checkbox，涉及到了for，要求是只能用纯JavaScript。一开始很自然的这么写了：

  const roles__role_label = createNode("label");
  roles__role_label.className = "roles__role_label";
  roles__role_label.innerText = role.rolename;
  roles__role_label.htmlFor = role.roleid;

( createNode(element)是document.createElement(element); ) 😃

经过

找bug，一开始以为是伪类:checked样式的问题，改了一会发现不对，点label的时候根本没选上input。于是乎搜了一下，原来是设置属性的时候要用htmlFor而不是单纯的for。

总结

更多有关HTMLFOR请看这里