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

Question

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

例如：

如果未选中复选框，显示应为 "Please select a hobby"。
如果选中绘画，则显示“#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')];
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 2

在您的代码中，如果有未选中的框，代码将添加 "Please select a hobby" 消息。

相反，在最后检查一下，这会起作用：

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 我们将从这个数组中删除。然后我们 select 一个我们想要渲染列表的元素，然后渲染。希望对你有帮助。

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')
  ];

  // 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";
  }

}

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

Display of selected checkboxes not working in javascript

html

javascript

forms

checkbox

display