GORAGOD.com

freelance, web developer, web designer, hosting, domain name

คำนวณค่าที่เลือกโดย checkbox

มีคำถามจากบอร์ดเกี่ยวกับการคำนวณค่าโดยการเลือกจาก checkbox ผมเลยเอามาตอบบน how to แทน เผื่อมีคนสนใจ

<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
0SHAREFacebookLINE it!
^