jQuery เลือก Checkbox ทั้งหมดบนหน้าเว็บไซต์

สอนเขียน jQuery เลือก Checkbox ทั้งหมดบนหน้าเว็บไซต์ บทความนี้สอนการเขียนโค้ดสร้างตัวเลือก Checkbox แบบเลือกทั้งหมด หรือยกเลิกทั้งหมด ด้วย jQuery พร้อมแสดงผลลัพธ์บนหน้าเว็บไซต์ สามารถเขียนโปรแกรมได้ดังนี้

ตัวอย่าง jQuery เลือก Checkbox ทั้งหมด

<input type="checkbox" id="selectAll"> เลือกทั้งหมด<br/>
<input type="checkbox"> jQuery<br/>
<input type="checkbox"> JavaScript<br/>
<input type="checkbox"> HTML<br/>

<script>
    $("#selectAll").click(function(){
        $('input:checkbox').not(this).prop('checked', this.checked);
    });
</script>

jQuery เลือก checkBox ทั้งหมด จากตัวอย่างเมื่อผู้ใข้งานเลือก checkbox id=selectAll จะทำการค้นหา input:checkbox ทั้งหมด และกำหนดค่า checked เท่ากับค่า checked ของ id=selectAll ผ่านคำสั่ง prop หมายความว่า

1. checkBox id=selectAll ถูกติ๊กเลือก checkbox ทั้งหมดก็จะมีค่า checked = true คือถูกเลือกทั้งหมดไปด้วย

2. checkBox id=selectAll ถูกติ๊กออก checkbox ทั้งหมดก็จะมีค่า checked = false คือถูกติ๊กออกทั้งหมดไปด้วยเช่นเดียวกัน