Checkboxes

การใช้ checkbox (กล่องตัวเลือก) เป็นตัวเลือกที่ดี เมื่อเราต้องการที่จะให้ผู้ใช้เลือกได้หลายตัวเลือก checkbox ทำงานต่างกับ radio button ทีสามารถเลือกได้แค่ 1 ตัวเลือก checkbox จะมี input element ที่มีคุณลักษณะของ type เป็น checkbox ดังนี้

<input type="checkbox">

Input element ทั้งหมด เราต้องกำหนด name ถ้าเราไม่มีชื่อ server จะไม่สามารถทำงานได้เพราะจะไม่สามารถระบุได้ว่าจะเอาค่าจากตัวเลือกไหนมาทำงาน เราต้องตั้งค่าให้ value เพราะ server จะเอาค่าไปทำงานต่อ ดังตัวอย่าง

<input type="checkbox" name="nameOfChoice" value="1">

ในตัวอย่าง checkbox ถูก check และจะส่งค่าให้ server แล้ว server จะอ่านข้อมูลจาก “nameOfChoice” element ที่ตั้งค่าเท่ากับ 1 ไว้

Checked or not checked? (เลือกหรือไม่เลือก)

Checkbox นั้นจะไม่ถูกกำหนดให้ check ตั้งแต่แรก ผู้ใช้จะต้องเป็นคนเลือกว่าจะ check หรือไม่ check เอง แต่เราสามารถกำหนดให้ check ได้ตั้งแต่แรก หรือ เราแนะเป็นแนวทางให้ผู้ใช้เลือกได้ เพราะเราแสดงค่า ตามที่ได้กำหนดไว้ตามฐานข้อมูล เพียงแค่เพิ่มตัวแปร checked เข้าไป

<input type="checkbox" name="nameOfChoice" value="1" checked>

ในสมัยก่อน XHTML ตัวแปรทุกตัวต้องถูกตั้งค่า ตัวแปร Boolean ก็ด้วย หน้าตาจะเป็นแบบนี้

<input type="checkbox" name="nameOfChoice" value="1" checked="checked" />

ไม่ว่าจะเขียนแบบไหนก็แล้วแต่ browser ก็ยังทำงานได้เหมือนเดิม แต่แบบแรกจะสั้นกว่าและเป็นการเขียนแบบ HTML5

Multiple choices (การเลือกมากกว่า 1 ตัวเลือก)

ที่เราได้เรียนมา เป็นแบบเลือกทีละ 1 ตอนนี้เราจะเรียนแบบผู้ใช้เลือกได้มากกว่า 1 ดังตัวอย่างด้านล่าง

<form method="post" action="/Tests/Post/">      
    <fieldset>      
        <legend>What is Your Favorite Pet?</legend>      
        <input type="checkbox" name="favorite_pet" value="Cats">Cats<br>      
        <input type="checkbox" name="favorite_pet" value="Dogs">Dogs<br>      
        <input type="checkbox" name="favorite_pet" value="Birds">Birds<br>      
        <br>      
        <input type="submit" value="Submit now" />      
    </fieldset>      
</form>

เราจะสังเกตได้ว่า เรามี checkbox หลายตัวแต่ใช้ชื่อเดียวกัน ("favorite_pet") แต่มีค่าต่างกัน เช่น “Dogs” เมื่อ checkbox ส่งค่าให้กับ server แล้ว server จะใช้ชื่อเดียวกันแต่กำหนดค่าของตัวเลือกเป็น array 0-3 ถ้าเราใช้ radio button จะเลือกเพียงแค่ 1 แต่ checkbox จะไม่เลือกเลยก็ได้หรือเลือกทั้งหมดเลยก็ได้

Labels for checkboxes (ตั้งชื่อให้ checkbox ใช้ร่วมกัน)

ในตัวอย่างที่แล้ว เราจะสังเกตเห็นได้ว่าเราสามารถใส่ข้อมูลไปที่ข้างๆ checkbox ได้ แต่เราไม่สามารถคลิกบนข้อความนั้นเพื่อเลือกได้ ถ้าเราใช้ label element เราจะสามารถเลือกไปพร้อมๆกันได้

<input type="checkbox" name="favorite_pet" value="Cats">Cats<br>  
<input type="checkbox" name="favorite_pet" value="Dogs" id="dogs">
<label for="dogs">Dogs</label><br>

ในตัวอย่างจะมี checkbox 2 ชนิด แบบมี label และแบบไม่มี label ซึ่งหน้าตาจะคล้ายๆกัน อันที่มี label จะ click บนตัวข้อความได้เลย ถ้าใช้ checkbox บน smartphone ที่มีขนาดจอเล็กๆ จะทำให้เลือกสะดวกขึ้น

วิธีใช้ label นี้ง่ายมาก เราจะใช้ตัวแปร for เพื่อที่จะเชื่อมติดกับ form element และตัวแปร id

Working dynamically with a checkbox (การใช้งาน Checkbox ตลอดเวลา ในขณะที่ทำการรันโปรแกรม)

ซึ่งเหมือนกับ DOM element (Document Object Model ก็คือการมองส่วนต่างๆของหน้าเว็บให้เป็น object เพื่อให้เราสามารถเรียกใช้ object เหล่านั้นได้) ที่เราสามารถจัดการกับ checkbox ด้วย JavaScript (โปรแกรมบนระบบอินเทอร์เน็ต ซึ่งในการสร้างและพัฒนาเว็บไซต์) เราจะนำตัวอย่างที่แล้ว มาประยุกต์โดยการใช้ JavaScript

<form method="post" action="/Tests/Post">  
    <fieldset>  
    <legend>What is Your Favorite Pet?</legend>  
    <input type="checkbox" name="favorite_pet" value="Cats" onclick="return ValidatePetSelection();">Cats<br>  
    <input type="checkbox" name="favorite_pet" value="Dogs" onclick="return ValidatePetSelection();">Dogs<br>  
    <input type="checkbox" name="favorite_pet" value="Birds" onclick="return ValidatePetSelection();">Birds<br>  
        <br>  
    <input type="submit" value="Submit now">  
    </fieldset>  
</form>  

<script type="text/javascript">  
function ValidatePetSelection()  
{  
    var checkboxes = document.getElementsByName("favorite_pet");  
    var numberOfCheckedItems = 0;  
    for(var i = 0; i < checkboxes.length; i++)  
    {  
        if(checkboxes[i].checked)  
            numberOfCheckedItems++;  
    }  
    if(numberOfCheckedItems > 2)  
    {  
        alert("You can't select more than two favorite pets!");  
        return false;  
    }  
}  
</script>

หน้าตาของ form ก็จะเหมือนกับตัวอย่างอันก่อน แต่เราเพิ่ม event (เหตุการณ์ต่างๆที่เกิดขึ้น เช่น ผู้ใช้คลิกเมาส์) ทำให้ JavaScript เรียกการใช้งานที่ValidatePetSelection ซึ่งทำให้เมื่อผู้ใช้คลิกบนข้อความหรือ checkbox จะทำให้ JavaScript เรียกใช้งาน getElementsByName ด้วย โปรแกรมจะวนไปทุกๆ checkbox เมื่อวนไปถึง box ที่ถูกเลือก มันจะนับเพิ่มที่ละ 1 ถ้ามันเกิน 2 (ดังตัวอย่างหรือเกินจำนวนที่กำหนดไว้) มันจะแสดงให้ผู้ใช้ดูว่าเกิดข้อผิดพลาดขึ้น

นี่คือตัวอย่างแบบง่ายของ checkbox ที่ใช้ร่วมกับ JavaScript ถ้าเราใช้ร่วมกับ jQuery (JavaScript Library) เราจะเขียนโปรแกรมได้ง่ายขึ้น

สรุป

Checkbox ทำให้เราสร้างรายการของข้อมูลให้เป็นแบบตัวเลือกที่ผู้ใช้สามารถเลือกได้ ไม่ว่าจะเลือกแค่ตัวเดียวหรือหลายๆตัวพร้อมๆกัน เราควรใช้ label ควบคู่ไปกับ checkbox เพื่อให้ผู้ใช้สามารถมีพื้นที่ในการเลือก click เพิ่มขึ้น ซึ่งทำให้ Screen Reader (เทคโนโลยีที่สามารอ่านหน้าจอได้ เช่น การอ่านข้อความและแปลงออกมาเป็นเสียง) ใช้งานได้อย่างมีประสิทธิภาพ