Question

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

例如：

如果未选中任何复选框，则显示应为“请选择一个爱好”。
如果选中绘画，则显示“ #painting”
如果检查了绘画和阅读，则显示“＃reading＃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;
	}
}

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 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;
    }
  }
  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 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>

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

4 个答案: