htmlで作成したフォームの内容をページ遷移なしで同じページの特定要素に反映させたいのですが、チェックボックスで選択した内容がうまく表示されません。

javascriptのまったくの初心者なのですが、どなたか教えていただけないでしょうか。

javascriptコード
-------------------------------------------------
<script type="text/javascript">
window.onload = function () {
getValue();
var $formObject = document.getElementById( "sampleForm" );
for( var $i = 0; $i < $formObject.length; $i++ ) {
$formObject.elements[$i].onkeyup = function(){
getValue();
};
$formObject.elements[$i].onchange = function(){
getValue();
};
}
document.getElementById( "sampleOutputLength" ).innerHTML = $formObject.length;
}
function getValue() {
var $formObject = document.getElementById( "sampleForm" );
document.getElementById( "sampleOutputName" ).innerHTML = $formObject.formName.value;
document.getElementById( "sampleOutputArea" ).innerHTML = $formObject.formArea.value;
document.getElementById( "sampleOutputAge" ).innerHTML = $formObject.formAge.value;
document.getElementById( "sampleOutputComent" ).innerHTML = $formObject.formComent.value;
document.getElementById( "sampleOutputfood" ).innerHTML = $formObject.formfood.value;
document.getElementById( "sampleOutputsei" ).innerHTML = $formObject.formsei.value;
}
</script>
-------------------------------------------------

html
-------------------------------------------------
<form id="sampleForm">
【入力欄】
<br />
名前：<input type="text" name="formName" value="太郎">
<br />
相談内容：
<input type="hidden" name="formfood" />
<input type="checkbox" name="formfood[1]" />小児歯科<br>
<input type="checkbox" name="formfood[2]" />性別<br>
<br />
</form>
<div id="sampleOutput">
【出力欄】
<br />
名前：<span id="sampleOutputName"></span>
相談内容：<span id="sampleOutputfood"></span>
<br />
</div>