如何将复选框的值不提交直接显示在文本框中?

<script type="text/javascript">
function writeQQ(form) {
var Q = document.getElementById("QQ");
Q.value = "";
for (var i=0;i<form.elements.length;i++) {
  var e = form.elements[i];
  if (e.name == "checkbox" && e.checked == true) {
   Q.value = Q.value + e.value + ","
  }
}
}
</script>
<form name="form1" method="post" action="">
  a<input type="checkbox" name="checkbox" value="a" onClick="writeQQ(this.form)">
  b<input type="checkbox" name="checkbox" value="b" onClick="writeQQ(this.form)">
  c<input type="checkbox" name="checkbox" value="c" onClick="writeQQ(this.form)">
  d<input type="checkbox" name="checkbox" value="d" onClick="writeQQ(this.form)">
  e<input type="checkbox" name="checkbox" value="e" onClick="writeQQ(this.form)">
  f<input type="checkbox" name="checkbox" value="f" onClick="writeQQ(this.form)">
  g<input type="checkbox" name="checkbox" value="g" onClick="writeQQ(this.form)">
  h<input type="checkbox" name="checkbox" value="h" onClick="writeQQ(this.form)">
  i<input type="checkbox" name="checkbox" value="i" onClick="writeQQ(this.form)">
  <br>
  <br>
  <input id="QQ" type="text" name="QQ">
</form>