انتخاب و عدم انتخاب چک باکس ها با jquery
چکیده: تنها چیزی که شما برای انتخاب و عدم انتخاب تمام چک باکس ها در صفحه html خودتون نیاز دارید استفاده از ویژگی prop می باشد.
همانطور که میدانید در خیلی از صفحات وب ما نیاز داریم که تعدای از چک باکس ها را تنها با انتخاب یک چک باکس که معمولا با عنوان انتخاب تمام موارد شناخته میشوند را انتخاب و یا از حالت انتخاب درآوریم. به عنوان مثال، gmail مثال خوبی می تواند برای این مورد باشد. که شما زمانی که وارد inbox خود در حساب کاربری gmail خود میشوید می توانید با انتخاب چک باکس تمام موارد، تمامی گزینه ها را انتخاب و یا از حالت انتخاب خارج نمایید.
برای این منظور یک صفحه html با نام CheckAllCheckboxes.html بسازید. و چک باکس های زیر را درون آن قرار دهید:
<p id="checkBoxes"> <input type="checkbox" id="cb1" value="1"/> <label for="Checkbox1">گزینه اول</label> <br /> <input type="checkbox" id="cb2" value="2" /> <label for="Checkbox2">گزینه دوم</label> <br /> <input type="checkbox" id="cb3" value="3" /> <label for="Checkbox3">گزینه سوم</label> <br /> <input type="checkbox" id="cb4" value="4" /> <label for="Checkbox4">گزینه چهارم</label> <br /> <input type="checkbox" id="cb5" value="5" /> <label for="Checkbox5">گزینه پنجم</label> <br /></p> |
سپس یک چک باکس دیگر با نام ckbCheckAll قبل از کد بالا قرار دهید:
<input type="checkbox" id="ckbCheckAll" /><label for="ckbCheckAll">تمام موارد</label> |
از این چک باکس ما برای انتخاب و یا عدم انتخاب تمامی چک باکس ها استفاده می نماییم.
سند را ذخیره کنید و آن را در مرورگر اجرا نمایید. در نتیجه نمای زیر را مشاهده خواهید نمود:
حال کد زیر را بنویسید:
$(function () { var $tblChkBox = $("#checkBoxes input:checkbox"); $("#ckbCheckAll").on("click", function () { $($tblChkBox).prop('checked', $(this).prop('checked')); });}); |
در کد بالا ما یک متغیر با نام $tblChkBox تعریف کرده ایم که تمام چک باکسهای درون پاراگراف را در خود نگه می دارد:
|
|
و یک رویداد از نوع کلیک برای چک باکس ckbCheckAll نوشته ایم که به محض کلیک بر روی آن این رویداد فراخوانی می شود:
$("#ckbCheckAll").on("click", function () { $($tblChkBox).prop('checked', $(this).prop('checked'));}); |
و سرانجام در آخرین مرحله، درون این رویداد، ما با استفاده از ویژگی prop، انتخاب و یا عدم انتخاب چک باکس ها را handle می نماییم. به این صورت که اگر چک باکس ckbCheckAll تیک خورده باشد ما با استفاده از ویژگی prop مقدار آن را که true و یا false می باشد را به ویژگی prop تمام چک باکس ها set می نماییم.
$("#ckbCheckAll").on("click", function () { $($tblChkBox).prop('checked', $(this).prop('checked'));}); |
توجه نمایید که در اینجا کلمه کلیدی this به ckbCheckAll اشاره می کند.
کد زیر اگر چک باکس ckbCheckAll تیک خورده باشد true در غیر اینصورت false بر می گرداند.
|
$(this).prop(‘checked’)
|
توجه داشته باشید که مااین کار را فقط با یک خط کد با استفاده از کتابخانه jquery انجام داده ایم. در صورتی که با javascript باید چند خط کد برای این منظور به کار میبردیم. ما این جا از prop( propertyName, value ) استفاده کرده ایم که این ویژگی prop دو آرگومان می گیرد که اولین آرگومان در این مثال ما propertyName می باشد که در این مثال ما checked می باشد و دومین آرگومان از نوع Boolean می باشد.
قبل از jquery 1.6 ما از ویژگی attr استفاده می کردیم که برای پیاده سازی این مثال ما باید این ویژگی را درون شرط if و else قرار می دادیم. به این صورت که اگر المنت ckbCheckAll تیک خورده بود ویژگی attribute را به مقدار true ست کن در غیر اینصورت آن را به false. ولی از jquery 1.6 به بعد توصیه شده است که از ویژگی prop استفاده شود.
Handle کردن چک باکس مستر (ckbCheckAll ) در صورت عدم انتخاب یکی از چک باکس های درون پاراگراف
حال باید سند وب خود را طوری handle نماییم که اگر کاربر یکی از چک باکس های درون پاراگراف را از حالت انتخاب خارج نمود باید چک باکس ckbCheckAll نیز از حالت انتخاب خارج گردد.
برای این منظور ما از قطعه کد زیر استفاده می نماییم:
$("#checkBoxes").on("change", function () { if (!$(this).prop("checked")) { $("#ckbCheckAll").prop("checked", false); }}); |
این قطعه کد رویداد change برای تمام چک باکس های درون تگ پاراگراف را چک می کند. در صورتی که یکی از آنها از حالت انتخاب خارج گردد سپس چک باکس ckbCheckAll نیز از حالت انتخاب خارج می گردد.
Handle کردن چک باکس های disable
حال اگر یکی از چک باکس ها در صفحه ما disable بود باید چکار کرد؟
<input type="checkbox" id="cb4" disabled="disabled" value="4" /> |
در این حالت، ما باید کد خود را طوری مدیریت نماییم که زمانی که کاربر چک باکس ckbCheckAll را تیک زد به غیر از چک باکس disable شدهف بقیه چک باکس ها به حالت انتخاب درآیند. که بری این منظور ما باید چک باکس مورد نظر را exlude نماییم:
$("#ckbCheckAll").on("click", function () { $($tblChkBox).not(":disabled").prop('checked', $(this).prop('checked'));}); |
ما با استفاده از عملگر not، چک باکس هایی که disable هستند را از این قاعده مستثنی ساخته ایم.
حال سند وب را ذخیره نموده و تغییرات را مشاهده نمایید.
