javascript - 复选框(javascript)选择，第一项显示未定义？

Question

我正在尝试选择并返回一些项目(复选框)。一切都很好，但第一项总是显示未定义。无法解决这个问题!

我的代码如下

function checkList () {
  var checked;
  var i;

  for( i = 0; i < document.form1.length; i++) {
    var element = document.form1[i]
    if (element.type == "checkbox"){
      if (element.checked == true){
        checked = checked + element.value + "<br/>";

      }

    }

  }
  document.getElementById('checked').innerHTML = checked;
}

<form name="form1">
  <input type="checkbox" name="checkbox1" id="checkbox1" value="Pen" />
  <label value="Earned" for="checkbox1">Pen</label>
  <br	/>
  <input type="checkbox" name="checkbox2" id="checkbox2" value="Book" />
  <label value="Earned" for="checkbox2" >Book</label>
  <br/>
  <input type="checkbox" name="checkbox1" id="checkbox3" value="Sharpner" />
  <label value="Earned" for="checkbox3">Sharpner</label>
  <br/>
  <input type="checkbox" id="checkbox4" name="checkbox1" value="Pencil" />
  <label value="Earned" for="checkbox4">Pencil</label>
  <br/> <br/>
  <input type="button" id="done" value="Done" onclick="checkList()" />
  <br/><br/>
</form>

<p >You are taking:</p>
<span id="checked"></span>

Answer 1

尝试改变

<form name="form1">
  <input type="checkbox" name="checkbox1" id="checkbox1" value="Pen" />
  <label value="Earned" for="checkbox1">Pen</label>
  <br   />
  <input type="checkbox" name="checkbox2" id="checkbox2" value="Book" />
  <label value="Earned" for="checkbox2" for="checkbox">Book</label>
  <br/>
  <input type="checkbox" name="checkbox1" id="checkbox3" value="Sharpner" />
  <label value="Earned" for="checkbox3" for="checkbox" for="checkbox">Sharpner</label>
  <br/>
  <input type="checkbox" id="checkbox4" name="checkbox1" value="Pencil" />
  <label value="Earned" for="checkbox4">Pencil</label>
  <br/> <br/>
  <input type="button" id="done" value="Done" onclick="checkList()" />
  <br/><br/>
</form>

<p >You are taking:</p>
<span id="checked"></span>

到此....

    <form name="form1">
  <input type="checkbox" name="checkbox1" id="checkbox1" value="Pen" />
  <label value="Earned" for="checkbox1">Pen</label>
  <br   />
  <input type="checkbox" name="checkbox2" id="checkbox2" value="Book" />
  <label value="Earned" for="checkbox2">Book</label>
  <br/>
  <input type="checkbox" name="checkbox3" id="checkbox3" value="Sharpner" />
  <label value="Earned" for="checkbox">Sharpner</label>
  <br/>
  <input type="checkbox" id="checkbox4" name="checkbox4" value="Pencil" />
  <label value="Earned" for="checkbox4">Pencil</label>
  <br/> <br/>
  <input type="button" id="done" value="Done" onclick="checkList()" />
  <br/><br/>
</form>

<p >You are taking:</p>
<span id="checked"></span>

代码中有多个重复项，例如 (for="")

请告诉我，谢谢