Multiple checkbox alter text - I want to put the result on label/span not in input text

Question

so far I got this, the changing of text will appear on input text. I want just put it as span/label.

<script>
function pros(frm){
      //For each checkbox see if it has been checked, record the value.
   for (i = 0; i < frm.box.length; i++)
      if (frm.box[i].checked){
         frm.text[i].value = 'Checked';
      } else {
    frm.text[i].value = 'Unchecked';
      }

}
</script>

and the HTML is

<form method="post" action="field/check.php" name="field">
    <table class='zb'>

<tr><td><b>Reading</b></td><td><input type='checkbox' id='box' name='Reading' value='Reading' onchange='pros(this.form)'/></td>
<td><input type='text' class='nobord' id='text' value='Unchecked' readonly></td></tr>
<tr><td><b>Grammar</b></td>
<td><input type='checkbox' id='box' name='Grammar' value='Grammar' onchange='pros(this.form)'/></td>
<td><input type='text' class='nobord' id='text' value='Unchecked' readonly></td></tr>
<tr><td><b>Writing</b></td>
<td><input type='checkbox' id='box' name='Writing' value='Writing' onchange='pros(this.form)'/></td>
<td><input type='text' class='nobord' id='text' value='Unchecked' readonly></td></tr>
<tr><td><b>Speaking</b></td>
<td><input type='checkbox' id='box' name='Speaking' value='Speaking' onchange='pros(this.form)'/></td>
<td><input type='text' class='nobord' id='text' value='Unchecked' readonly></td></tr>   
        </table><br/>
    <div align="center">
<input type="submit" name="Submit" value="Submit" class="cssbutton"/>  
<input name="reset" type="reset" value="Reset" class="cssbutton"/>

</form>

so, how the JS to put the result on span/label (if checked or unchecked)? then I will put span/label somewhere after tag form closed.