我正在尝试显示选择到 div 中的每个复选框的值答案

【问题标题】：I'm trying to display the value of each checkbox selected into a div我正在尝试显示选择到 div 中的每个复选框的值
【发布时间】：2021-05-05 16:27:17
【问题描述】：

我在网站上四处查看，但似乎找不到任何适合我的解决方案

我正在尝试以数组格式将每个复选框的值显示到 div 中

<section id="inputs">
    
    <div class="row">
    
      <div class="col nopad text-center">
       <label class="image-checkbox">
       <input type="checkbox" id="user" name="image[]" value="Yoga"/>
       <img src="image.jpg" class="img-responsive"/>
       <p>Yoga</p>
       </label>
     </div>
    
     <div class="col nopad text-center">
       <label class="image-checkbox"  id="image-checkbox">
       <input type="checkbox" name="image[]" value="Gymnastics" />
       <img src="image.jpg" class="img-responsive"/>
       <p>Gymnastics</p> 
      </label>
     </div>
    
     <div class="col nopad text-center">
       <label class="image-checkbox">
       <input type="checkbox" name="image[]" value="Aerial Acrobatics" />
       <img src="image.jpg" class="img-responsive"/>
       <p>Aerial Acrobatics</p> 
      </label>
     </div>
<div>
</section>

【问题讨论】：

请展示您的尝试。它应该是一个简单的forEach 循环。

标签： javascript jquery input checkbox

【解决方案1】：

创建一个数组，比如说selectedBoxes。
使用querySelectorAll选择所有checkboxes。
循环遍历所有checkboxes，并为它们添加一个change 监听器。
最后，在更改处理程序中，只需检查正在更改的复选框当前是否在数组中，如果只是将其从数组中删除，否则添加到数组中。

(为简洁起见，我删除了标签内的图像和 p 标签)

const selectedBoxes = [];
const checkboxes = document.querySelectorAll("input[type=checkbox]");

checkboxes.forEach((box, i) => {
  box.addEventListener("change", (e) => {
    const idx = selectedBoxes.findIndex(v => v === e.target.value);

    if (idx === -1) selectedBoxes.push(e.target.value);
    else selectedBoxes.splice(idx, 1);

    console.clear();
    console.log(selectedBoxes);
  })
});

<section id="inputs">
  <div class="row">
    <div class="col nopad text-center">
      <label class="image-checkbox">
        <input type="checkbox" id="user" name="image[]" value="Yoga" />
        Yoga
      </label>
    </div>
    <div class="col nopad text-center">
      <label class="image-checkbox" id="image-checkbox">
        <input type="checkbox" name="image[]" value="Gymnastics" />
        Gymnastics
      </label>
    </div>

    <div class="col nopad text-center">
      <label class="image-checkbox">
        <input type="checkbox" name="image[]" value="Aerial Acrobatics" />
        Aerial Acrobatics
      </label>
    </div>
  </div>
</section>
<ul id="selected-boxes">
</ul>

【讨论】：

@ryan。请检查这是否解决了您的问题，如果您有任何问题，请告诉我。

【解决方案2】：

const chbox = document.querySelectorAll('[type=checkbox]');
const res = document.querySelector('#res');


chbox.forEach(ch=>{
  ch.addEventListener('click',()=>{
  if(ch.checked){
      res.innerText += ch.value + '\n'
  }else{
      res.innerText = res.innerText.replace(ch.value+'\n','')
  }
  })
})

<section id="inputs">
    
    <div class="row">
    
      <div class="col nopad text-center">
       <label class="image-checkbox">
       <input type="checkbox" id="user" name="image[]" value="Yoga"/>
       <img src="image.jpg" class="img-responsive"/>
       <p>Yoga</p>
       </label>
     </div>
    
     <div class="col nopad text-center">
       <label class="image-checkbox"  id="image-checkbox">
       <input type="checkbox"  name="image[]" value="Gymnastics" />
       <img src="image.jpg" class="img-responsive"/>
       <p>Gymnastics</p> 
      </label>
     </div>
    
     <div class="col nopad text-center">
       <label class="image-checkbox">
       <input type="checkbox" name="image[]" value="Aerial Acrobatics" />
       <img src="image.jpg" class="img-responsive"/>
       <p>Aerial Acrobatics</p> 
      </label>
     </div>
     
     <h4>Checked values : </h4> 
     <div id="res">
     </div>
<div>
</section>

【讨论】：

【解决方案3】：

我正在尝试以数组格式将每个复选框的值显示到 div 中

const container = document.getElementById("inputs");
const checkBoxes = Array.from(container.getElementsByTagName('INPUT')).filter(el => el.type === "checkbox");
// Go wild here
const allChecked = checkBoxes.filter(e => e.checked);
const allUnchecked = checkBoxes.filter(e => !e.checked);
const stringOfCheck = checkBoxes.map(e => e.checked ? "checked" : "unchecked").join(',');

Array.from 将 nodeList 转换为适当的数组，然后您可以使用该元素数组来获取它们的值和属性

【讨论】：