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或不单击onClick来显示在页面底部，并显示如下标签：

选项一

选项四

如果选中一和四。

Answer 1

您可以通过多种方法来实现它。在我的实现中，我为每个checkbox分配一个onClick事件处理程序，该事件处理程序从Set添加或删除其值，并在迭代Set之后，转储到容器中string和所有选定的checkboxes：

// 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>

注意：仅当所有复选框的初始状态均为“未选中”时，此功能才有效

Answer 2

这可以与每个复选框和一些Javascript上的onClick事件一起使用。

 <input type="checkbox" name="lra" id="1adm" value="selected" onclick="myFunction('1adm')">

<div id="footer" />

<script>
function myFunction(checkId) {
var checkBox = document.getElementById(checkId);
var text = document.getElementById("footer");
if (checkBox.checked == true){
   //add it to footer text
} else {
   //remove from footer text
}
}
</script>

Answer 3

尝试这个示例，尽管代码可能相当短：）

let selector = 'input[type="checkbox"][name="lra"]';
let updateStatus = function() {
  let labels = [];
  Array.prototype.slice.call(document.querySelectorAll(selector + ':checked + label')).forEach(function(l) {
    labels.push(l.textContent || l.innerHTML);
  });
  document.querySelector('#checkStatus').innerHTML = (labels.join('<br/>') || 'Kindly choose from above options');
};
document.addEventListener('DOMContentLoaded', function() {
  Array.prototype.slice.call(document.querySelectorAll(selector)).forEach(function(c) {
    c.addEventListener('click', function(e) {
      e.stopPropagation();
      updateStatus();
    });
  });
  updateStatus(); /* run on page load */
});

.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;
}

#checkStatus {
  border-top: 1px solid #ccc;
  padding: 1rem;
  margin-top: .3rem;
}

<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>

<div id="checkStatus"></div>

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

3 个答案: