ในแบบ แรกการร้องขอข้อมูลจะเกิดขึ้นเมื่อเรา submit เท่านั้น ซึ่งในตัวอย่างนั้นเกิดจากการใช้ GForm แต่ในตัวอย่างนี้ ผมได้เปลี่ยนมาใช้ GAjax แทน ซืีงการร้องขอข้อมูลจะเกิดขึ้นทันทีที่มีการคลิก checkbox

<form id="main_form" method="post" action="get_chkarray2.php">
<p><input type="text" id="chk_result" /></p>
</form>
<form id="check_form">
<?php
    for($i = 0 ; $i < 10 ;$i++){
        echo "<p><input type=\"checkbox\" class=\"chkarray\" name=\"check[]\" value=\"$i\" />$i</p>\n";
    }
?>
</form>

โค้ดฟอร์มในตัวอย่างนี้ มีด้วยกัน 2 ฟอร์มครับ main_form จะเป็นฟอร์มข้อมูลปกติ ที่จะใช้ submit และ check_form ซึ่งเอาไว้ใช้สำหรับ checkbox เท่านั้น แต่ก็สามารถใช้ฟอร์มเดียวกันได้ครับ ซึ่งถ้าใช้ฟอร์มเดียวกัน ค่าของ checkbox ที่ถูกเลือกก็จะถูกส่งไปพร้อมกันกับ input อื่นๆของฟอร์มในตอน submit ด้วย

<script type="text/javascript">
// วนลูป input ทุกตัวในฟอร์ม
forEach($E('check_form').getElementsByTagName('input'), function(item){
    // เลือกเฉพาะรายการที่มี class = chkarray ตามที่กำหนดในฟอร์ม
    if(item.className == 'chkarray'){
        // กำหนด event เมื่อ click ให้กับ checkbox แต่ละตัว
        $G(item).addEvent('click', doCheckClick)
    };
});
</script>

โค้ด Javascript สำหรับจัดการกับ checkbox เพื่อกำหนด event click ให้กับ checkbox ซึ่งเมื่อมีการคลิกเลือกก็จะไปเรียกฟังก์ขั่น doCheckClick ให้ทำงาน

<script type="text/javascript">
var doCheckClick = function(event){
    var req = new GAjax();
    req.send('chkarray.php' ,req.getRequestBody('check_form') ,function(xhr) {
        $E('chk_result').value = xhr.responseText;
    });

};
</script>

ฟังก์ชั่น doCheckClick ครับทำหน้าที่ในการส่งข้อมูลด้วย GAJAX  เพื่อร้องขอข้อมูลจาก Server โดยส่งไปร้องขอข้อมูลจาก chkarray.php

<?php
    $r = 0;
    if(isset($_POST[check])) foreach($_POST[check] AS $item){
        $r = $r + $item;
    }
    echo $r;
?>

โค้ด chkarray.php ในตัวอย่างนี้ทำหน้าที่รวมผลลัพท์ของ checkbox ที่เลือก แล้วส่งค่ากลับไปแสดงผลเหมือนคัวอย่างก่อนหน้าครับ

ตัวอย่าง