jQuery selector นับจำนวนตามค่าที่เลือกและคำนวณคะแนน

เขียน PHP ร่วมกับ jQuery เพื่อเช็กค่าตัวเลือก

การเขียนโปรแกรมเว็บแอพพลิเคชั่นนั้น ส่วนของการแสดงผลจะใช้ jQuery ร่วมกับ Javascript เพื่อแสดงผลลัพธ์ที่เกิดขึ้นในขณะนั้น ในตัวอย่างนี้จะเป็นการคำนวณคะแนนที่ได้จากตัวเลือก โดยใช้ jQuery selector ในการนับจำนวนตัวเลือกค่าต่างๆ ว่ามีจำนวนเท่าไหร่ แล้วนำมาคำนวณตัวค่าคงที่ของตัวมันเอง ก็จะได้คะแนนที่ต้องการ

(สำหรับการบันทึกข้อมูลในแบบฟอร์มนั้น เพื่อความถูกต้องของข้อมูลนอกจากจะรับค่าผลรวมจากแบบฟอร์มแล้ว ควรจะคำนวณค่าจากรายการต่างๆมารวมกันเพื่อตรวจสอบความถูกต้องอีกครั้ง เพื่อป้องกันความผิดพลาดที่อาจจะเกิดจากขั้นตอนการคำนวณด้วย JavaScript)

ซอร์สโค๊ด HTML

<style>
input{ color : #ff0000; font-weight:bold;}
</style>
<table>
    <tr>
        <th>ตัวเลือก</th>
        <th>จำนวน</th>
        <th>คะแนน</th>
    </tr>
    <tr>
        <td>ดีมาก</td>
        <td><input type="text" id="ch5" /></td>
        <td><input type="text" id="rs5" /></td>
    </tr>
    <tr>
        <td>ดี</td><td><input type="text" id="ch4" /></td><td><input type="text" id="rs4" /></td>
    <tr>
    <tr>
        <td>พอใช้</td>
        <td><input type="text" id="ch3" /></td>
        <td><input type="text" id="rs3" /></td>
    </tr>
    <tr>
        <td>น้อย</td><td><input type="text" id="ch2" /></td><td><input type="text" id="rs2" /></td>
    </tr>
    <tr>
        <td>น้อยที่สุด</td>
        <td><input type="text" id="ch1" /></td>
        <td><input type="text" id="rs1" /></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td><input type="text" id="total" /></td>
    </tr>
</table>

ซอร์สโค๊ด Javascript & jQuery

<script type="text/javascript">
    $("<?php echo $check;?>").attr("checked", true);

    var xCnt5 = $('input:checked[value=5]').length;
    var xCnt4 = $('input:checked[value=4]').length;
    var xCnt3 = $('input:checked[value=3]').length;
    var xCnt2 = $('input:checked[value=2]').length;
    var xCnt1 = $('input:checked[value=1]').length;
    $('#ch5').val(xCnt5);
    $('#ch4').val(xCnt4);
    $('#ch3').val(xCnt3);
    $('#ch2').val(xCnt2);
    $('#ch1').val(xCnt1);

    var xScore5 = 5 * xCnt5;
    var xScore4 = 4 * xCnt4;
    var xScore3 = 3 * xCnt3;
    var xScore2 = 2 * xCnt2;
    var xScore1 = 1 * xCnt1;
    $('#rs5').val(xScore5);
    $('#rs4').val(xScore4);
    $('#rs3').val(xScore3);
    $('#rs2').val(xScore2);
    $('#rs1').val(xScore1);

    $('#total').val(xScore5 + xScore4 + xScore3 + xScore2 + xScore1);
</script>

PHP สร้างเว็บไซต์ให้เป็นเรื่องง่ายๆ

ค้นหาบล็อกนี้