Currently when check boxes are selected the total appears in the text field and the choices are listed in the box next to it. I need it to do something different.

I need for the text fields to go away and be replaced with a "total" button that pressed opens a new alert window informing the user what the total is.

Can anyone help?

Code:
<script type="text/javascript">
//<![CDATA[
function calculate(f)
{
var nums = f.num;
var ntext = f.numtext;
var nitem = f.numitem;
var result = 0;
var items = '';
for(var i=0;i<nums.length;i++)
{
if(nums[i].checked)
{
result+=parseFloat(ntext[i].value);
items+=nitem[i].value+'\n';
}
}
f.answer.value=result;

f.allitems.value=items;
}
//]]>
</script>
</head>
<body>
<div id="wrap">
<div id="header">
<h1><img src="Images/logo.png" alt="Logo" width="300" height="50" /></h1>
<ul id="nav">
<li><a title="About" href="index.html">About</a></li>
<li><a class="active" title="Menu" href="menu.html">Menu</a></li>
<li><a title="Contact" href="contact.html">Contact</a>
</ul>
</div>
<div id="instructions">
<form name="myform">
Build your own family meal<br>
<div class="box1">
<input type="checkbox" name="num" onClick="calculate(this.form)">
<input type="hidden" name="numtext" value="24.00" onChange="calculate(this.form)">
<input type="hidden" name="numitem" value="Chicken Enchiladas" onChange="calculate(this.form)">
<div class="box2">Chicken Enchiladas $24.00</div>
</div>
<br>
<div class="box1">
<input type="checkbox" name="num" onClick="calculate(this.form)">
<input type="hidden" name="numtext" value="15.00" onChange="calculate(this.form)">
<input type="hidden" name="numitem" value="Rice and Beans" onChange="calculate(this.form)">
<div class="box2">Rice and Beans $15.00</div>
</div><br>
<div class="box1">
<input type="checkbox" name="num" onClick="calculate(this.form)">
<input type="hidden" name="numtext" value="6.00" onChange="calculate(this.form)">
<input type="hidden" name="numitem" value="Chips and Salsa" onChange="calculate(this.form)">
<div class="box2">Chips and Salsa $6.00</div>
</div><br>
<div class="box1">
Total <input type="text" name="answer" size="5"><textarea name="allitems" rows="5"></textarea>
</div>
</form>
</div>