แรงจูงใจ …
Item บน form เยอะเหลือเกิน ลูกค้าก็อยากจะได้อะไรง่ายๆ ขอ click เดียวเลือกหมด หรือยกเลิกหมดเลยได้มั้ย
เตรียมตัวให้พร้อม …
1. เพิ่ม web form เข้าไปที่ projects ที่เปิดแล้วของเรา ตั้งชื่อ AllCheck.aspx
2. เพิ่ม code ที่ form โดยเพิ่ม check box ของ item 4 อันเข้าไป กับ check box ที่ไว้ click เลือกทั้งหมด 1 อัน
<form id=”form1″ runat=”server”>
<div align=”left”>
<fieldset style=”width:400px;height:170px;”>
<p>เลือกเนื้อของเหรียญที่ท่านต้องการบูชา:</p>
<asp:CheckBox ID=”chkSelectAll” runat=”server” Text=”เลือกทุกเนื้อ” />
<asp:CheckBoxList ID=”chkList” runat=”server”>
<asp:ListItem Text=”เนื้อทองแดง” Value=”1″></asp:ListItem>
<asp:ListItem Text=”เนื้อเงิน” Value=”2″></asp:ListItem>
<asp:ListItem Text=”เนื้อทองคำ” Value=”3″></asp:ListItem>
<asp:ListItem Text=”เนื้อตะกั่ว” Value=”4″></asp:ListItem>
</asp:CheckBoxList>
</fieldset>
</div>
</form>
3. ลอง run form ดูหน้าตาก็ออกมาคล้ายๆรูปข้างล่างนี้
วิธีทำ…
1. ในรหัส jQuery ที่ฟังชั่น document.ready()ใช้ jQuery ค้นหา chkSelectAll แล้วเพิ่มฟังชั่นเข้าไปที่ event click
$(‘#chkSelectAll’).click(function() {
2. ในบร็อกฟังชั่น event click ใช้ jQuery ค้น item ใน chkList ทั้งหมดขึ้นมาแล้ว set attribute checked ให้เท่ากับ ค่าที่ถูกเช็คคือ attribute checked ของ chkSelectAll โดยใช้คำสั่งสอบถาม is
$(“#<%=chkList.ClientID%> input[type=’checkbox’]”).attr(‘checked’, $(‘#chkSelectAll’).is(‘:checked’));
}
รหัส jQuery ที่เสร็จแล้วจะมีหน้าตาแบบนี้
<script type=”text/javascript”>
$(document).ready(function() {
$(‘#chkSelectAll’).click(function() {
$(“#<%=chkList.ClientID%> input[type=’checkbox’]”).attr(‘checked’, $(‘#chkSelectAll’).is(‘:checked’));
}
);
});
</script>
ทดสอบการทำงาน …
ลอง check ที่ เลือกทุกเนื้อ form ก็จะ check item ให้เราทั้งหมด และลอง check ออกอีกที form ก็จะ check item ออกทั้งหมด
ขอบคุณครับ
