คำนวณค่าที่เลือกโดย checkbox
<form name="frm">
<p><input type="checkbox" value="1" onclick="tick(frm)" /> 1</p>
<p><input type="checkbox" value="2" onclick="tick(frm)" /> 2</p>
<p><input type="checkbox" value="3" onclick="tick(frm)" /> 3</p>
<p><input type="checkbox" value="4" onclick="tick(frm)" /> 4</p>
<input type="text" name="sum" value="0" />
</form>
<script type="text/javascript">
function tick( frm )
{
var sum=0;
for (var i = 0; i < frm.elements.length; i++) {
var chk = frm.elements[i];
if ( chk.type == 'checkbox' && chk.checked )
{
sum += parseFloat( chk.value );
};
};
frm.sum.value = sum;
}
</script>
แบบแรก ผมว่าแบบนี้เป็นแบบทั่วๆไป คำนวณและแสดงผลภายใน textbox จากค่าที่เลือกโดย checkbox
<form name="frm">
<p><input type="checkbox" value="1" onclick="tick(frm , this)" /> 1</p>
<p><input type="checkbox" value="2" onclick="tick(frm , this)" checked="checked" /> 2</p>
<p><input type="checkbox" value="3" onclick="tick(frm , this)" /> 3</p>
<p><input type="checkbox" value="4" onclick="tick(frm , this)" checked="checked" /> 4</p>
<input type="text" name="sum" value="100" />
</form>
<script type="text/javascript">
function tick( frm , chk )
{
// คำนวณบวกหรือลบจากค่าเริ่มต้น
var sum = parseFloat( frm.sum.value );
frm.sum.value = chk.checked ? sum + parseFloat( chk.value ) : sum - parseFloat( chk.value );
}
</script>
แบบนี้จะพิเศษหน่อย อีตรงที่มีค้าเริ่มต้นใน textbox รวมถึงมีค่าเริ่มต้นใน checkbox ด้วย เงื่อนไขของฟอร์มแบบนี้ก็คือ บวกค่า chekbox ที่เลือกเข้ากับค่าเดิมใน text เมือ checked และ ลบค่าใน text ออก เมื่อ unchecked