显示选定的复选框在 javascript 中不起作用

Question

我想在单击"提交"时显示所选复选框的名称。

例如：

• 如果未选中复选框，则显示应为"请选择一个爱好"。
• 如果选中绘画，则显示"#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

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>

Answer 4

这是执行此操作的片段。我们将侦听器附加到表单(而不是每个输入(。然后我们查看我们点击的东西是否实际上是输入类型 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>