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

Question

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

我正在尝试以数组格式

将选中的每个复选框的值显示到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>

Answer 1

I'm trying to display the value of each checkbox selected into a div in an array format

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 转换为适当的数组，然后您可以使用该元素数组来获取它们的值和属性

Answer 2

创建数组假设 selectedBoxes。
Select 所有 checkboxes 使用 querySelectorAll。
遍历所有 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>

Answer 3

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>

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

I'm trying to display the value of each checkbox selected into a div

javascript

checkbox

jquery

input