javascript - 标签标签包装复选框输入时如何删除复选框和样式标签

Question

这里是高级初学者所以请耐心等待:)

我很幸运地删除了 checkboxes 并在 for="" 属性存在的地方设置了它们的 labels 样式。

在我尝试设置样式的一种特定形式上，标记完全不同并且 labels 包装了 input 并且没有 for 属性。

因此标记是..

<li id='tags-234'>
  <label class="selectit">
    <input value="234" type="checkbox" 
           name="tax_input[tags][]" id="in-tags-234" /> Tag 1
  </label>
</li>

任何人都可以让我开始吗？我是否需要先以某种方式添加标签？

非常感谢所有帮助。

Answer 1

不确定为什么要删除复选框并设置标签样式，但可以通过以下方式使用 HTML 结构完成此操作:

// Get reference to all labels that don't have a "for" attribute:
var labels = document.querySelectorAll("label:not([for])");

// Turn that node list into a JavaScript array:
var lblArray = Array.from(labels);

// Loop through the array:
lblArray.forEach(function(lbl){
  lbl.removeChild(lbl.firstElementChild);  // remove the child content
  lbl.classList.add("someStyle");          // style the label by adding a class to it 
});

.someStyle {
  background-color:yellow;
}

<li id='tags-234'>
  <label class="selectit">
    <input value="234" type="checkbox" 
           name="tax_input[tags][]" id="in-tags-234" /> Tag 1
  </label>
</li>