Отображение выбранных флажков не работает в JavaScript

Question

Я хотел бы отображать имена выбранных флажков, когда нажимаю кнопку Отправить.

Например:

• Если флажок не установлен, должен отображаться «Пожалуйста, выберите хобби»".
• Если флажок нарисован, отобразите" #painting "
• Если флажок нарисован и прочитан, отобразите" # read # painting "
  

Нижеданный код не работает.

function displayHobbies(){
let HobbiesInput=[document.getElementById('dancing'),
document.getElementById('reading'),
document.getElementById('painting')];
var HobbiesError="";
for(var i=0;i<HobbiesInput.length;i++)
{
	if (HobbiesInput[i].checked==false)
	{
            HobbiesError="Please select a hobby";
	}	
	else
	{
	    HobbiesError +="#"+HobbiesInput[i].name;
	}
}
document.getElementById('hobbies_display').innerHTML=HobbiesError;
}

<form name= "myform" onclick="displayHobbies()">

Hobby <input type="checkbox" id="dancing" name="dancing">
  	  <label for="dancing">Dancing</label>
      <input type="checkbox" id="reading" name="reading">
  	  <label for="reading">Reading</label>
  	  <input type="checkbox" id="painting" name="painting">      
  	  <label for="painting">Painting</label>
<button type="button" id="hobby_submit">Submit</button>
</form>
Hobbies:<label id="hobbies_display"></label>

Answer 1

Вот что-то более чистое:

function displayHobbies() {

  let HobbiesInput = [
      document.getElementById('dancing'),
      document.getElementById('reading'),
      document.getElementById('painting')
  ];

  // flag if no hobby is checked
  var noHobbiesChecked = true;

  // reset display area
  document.getElementById('hobbies_display').innerHTML = "";

  for (var i = 0; i < HobbiesInput.length; i++) {

    if (HobbiesInput[i].checked === true)   {
      // add hobby to display area
      document.getElementById('hobbies_display').innerHTML += "#"+HobbiesInput[i].name;
      // turn off the flag since we have at least one hobby checked
      noHobbiesChecked = false; 
    }

  }

  if (noHobbiesChecked === true) {
    // show error
    document.getElementById('hobbies_display').innerHTML = "Please select a hobby";
  }

}

Answer 2

В вашем коде, если флажок снят, код добавит сообщение «Пожалуйста, выберите хобби».

Вместо этого проверьте это в конце, и это будет работать:

function displayHobbies() {
  let HobbiesInput = [
    document.getElementById('dancing'),
    document.getElementById('reading'),
    document.getElementById('painting')
  ];
  var HobbiesError = "";
  for (var i = 0; i < HobbiesInput.length; i++) {
    if (HobbiesInput[i].checked) {
      HobbiesError += "#" + HobbiesInput[i].name;
    }
  }
  document.getElementById('hobbies_display').innerHTML = HobbiesError || "Please select a hobby";
}

<form name="myform" onclick="displayHobbies()">

  Hobby <input type="checkbox" id="dancing" name="dancing">
  <label for="dancing">Dancing</label>
  <input type="checkbox" id="reading" name="reading">
  <label for="reading">Reading</label>
  <input type="checkbox" id="painting" name="painting">
  <label for="painting">Painting</label>
  <button type="button" id="hobby_submit">Submit</button>
</form>
Hobbies:<label id="hobbies_display"></label>

Answer 3

Вот фрагмент для этого.Мы прикрепляем слушателя к форме (а не к каждому входу).Затем мы смотрим, является ли вещь, на которую мы нажали, типом ввода checkbox.Затем, если он checked, мы помещаем его значение в массив, который мы хотим отобразить сверху, если not checked, мы удаляем из этого массива.Затем мы выбираем элемент, в котором мы хотим отобразить наш список, и визуализируем.Надеюсь, это поможет.

let values = [];
const form = document.getElementById('form')
form.addEventListener('click', e => {
  if (!e.target.type === 'checkbox') return;
  const value = e.target.value;
  const checked = e.target.checked;
  if (checked) {
    values.push(value)
  } else {
    const newValues = values.filter(v => v !== value);
    values = newValues;
  }
  const valuesList = document.getElementById('valuesList')
  valuesList.innerHTML = values.map(m => `#${m}`).join('')
})

<form id="form">
  <div id="valuesList"></div>
  <div>
    I have a bike
    <input type="checkbox" name="vehicle1" value="Bike">
  </div>
  <div>
    I have a car
    <input type="checkbox" name="vehicle2" value="Car">
  </div>
</form>

Answer 4

function displayHobbies() {
let HobbiesInput=[document.getElementById('dancing'),
                  document.getElementById('reading'),
                  document.getElementById('painting')];
var HobbiesError="";

for(var i=0;i<HobbiesInput.length;i++)
{
	if (HobbiesInput[i].checked) {
         HobbiesError +="#"+HobbiesInput[i].name;
	}
}

if (!HobbiesError) {
    HobbiesError="Please select a hobby";
}

document.getElementById('hobbies_display').innerHTML = HobbiesError;
}

<form name= "myform" onsubmit="displayHobbies(); return false;">

Hobby <input type="checkbox" id="dancing" name="dancing">
  	  <label for="dancing">Dancing</label>
      <input type="checkbox" id="reading" name="reading">
  	  <label for="reading">Reading</label>
  	  <input type="checkbox" id="painting" name="painting">      
  	  <label for="painting">Painting</label>
<button type="submit" id="hobby_submit">Submit</button>
</form>
Hobbies:<label id="hobbies_display"></label>