ASP.NET กับ jQuery: เลือก/ไม่เลือก item ทั้งหมดด้วย click เดียว

แรงจูงใจ …

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 ออกทั้งหมด

ขอบคุณครับ

Advertisements

#asp-net, #jquery