javascript - 使用javascript显示多个选中复选框的标签

Question

我有一个包含几十个复选框的列表，如下例所示。如果用户检查了其中的几个，我需要在页面底部显示哪些被检查了，例如: 选项一 方案三

尝试使用 onClick 执行此操作，以便在单击或取消单击复选框但无法使其工作时将其添加或删除到页面底部的列表中。

我的复选框示例 HTML

.checkboxes label {
  font-family: Open Sans Italic;
  font-size: 12px;
  color: white;
  font-weight: bold;
  border-radius: 20px 20px 20px 20px;
  background: blue;
  padding: 1px 6px;
  text-align: left;
}

input[type=checkbox]:checked+label {
  color: white;
  background: green;
}

<div class="checkboxes">
     <input type="checkbox" name="lra" id="1adm" value="selected">
     <label for="1adm" class="highlight">Option one</label>
     <br>
     <input type="checkbox" name="lra" id="2adm" value="selected">
     <label for="2adm" class="highlight">Option two</label>
     <br>
     <input type="checkbox" name="lra" id="3adm" value="selected">
     <label for="3adm" class="highlight">Option three</label>
     <br>
     <input type="checkbox" name="lra" id="4adm" value="selected">
     <label for="4adm" class="highlight">Option four</label>
     <br>
</div>

关于如何使用 javascript 执行此操作的任何建议，选中多个框以使用 onClick 显示在页面底部，显示标签，例如:

选项一

方案四

如果选中一和四。

Answer 1

您可以通过多种方法实现它。在我的实现中，我为每个 checkbox 分配了一个 onClick 事件处理程序，该事件处理程序在 Set 中添加或删除它的值，然后迭代 Set，将所有选中的 checkboxes 放入容器中 string:

// set to store the selected checkboxes values
let items = new Set();
// reference to the dumping container
let resultContainer= document.getElementById('result')

// onclick event handler
function updateItems(e){
  // value of the  clicked checkbox
  let value = e.target.value;
  // if value is already in the Set, remove it (input unchecked)
  if(items.has(value)) items.delete(value)
  // if value is not in in the set, insert it (input checked)
  else items.add(value)
  //
  // set updated ! now dump its contents...
  //
  // empty string
  let result = '';
  // iterate Set, and generate string with selected values
  
  items.forEach(i=> result += i +'<br>')
  // dump string
  resultContainer.innerHTML=result;
}

// select all checkboxes and assign the onclick event handler
let inputs = Array.from (document.querySelectorAll('input') )

inputs.forEach(i => i.onclick=updateItems )

<div class="checkboxes">
     <input type="checkbox" name="lra" id="1adm" value="one">
     <label for="1adm" class="highlight">Option one</label>
     <br>
     <input type="checkbox" name="lra" id="2adm" value="two">
     <label for="2adm" class="highlight">Option two</label>
     <br>
     <input type="checkbox" name="lra" id="3adm" value="three">
     <label for="3adm" class="highlight">Option three</label>
     <br>
     <input type="checkbox" name="lra" id="4adm" value="four">
     <label for="4adm" class="highlight">Option four</label>
     <br>
</div>
<br>
<div>Selected values</div>
<div id="result"></div>

Note : This will only work, if the initial state of all checkboxes is Unchecked