انتخاب و عدم انتخاب چك باكس ها با jquery
شناسه پست: 952
بازدید: 2880

انتخاب و عدم انتخاب چک باکس ها با 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>

از این چک باکس ما برای انتخاب و یا عدم انتخاب تمامی چک باکس ها استفاده می نماییم.

سند را ذخیره کنید و آن را در مرورگر اجرا نمایید. در نتیجه نمای زیر را مشاهده خواهید نمود:

انتخاب و عدم انتخاب چک باکس ها با jquery

حال کد زیر را بنویسید:

$(function () {
    var $tblChkBox = $("#checkBoxes input:checkbox");
    $("#ckbCheckAll").on("click", function () {
        $($tblChkBox).prop('checked', $(this).prop('checked'));
    });
});

در کد بالا ما یک متغیر با نام $tblChkBox تعریف کرده ایم که تمام چک باکسهای درون پاراگراف را در خود نگه می دارد:

var $tblChkBox = $("#checkBoxes input:checkbox");

 و یک رویداد از نوع کلیک برای چک باکس 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 هستند را از این قاعده مستثنی ساخته ایم.

حال سند وب را ذخیره نموده و تغییرات را مشاهده نمایید.

نویسنده

امید عباسی
من امید عباسی هستم. سالهاست که در زمینه برنامه نویسی با تکنولوژی دات نت فعالیت میکنم و عاشق این هستم که تجربیات و دانش خودم را در این زمینه با دیگران به اشتراک بزارم. خیلی دوست دارم که نظر و انتقاد خودتون رو در مورد این نوشته برای من بنویسید تا بتونم در آینده، مطالب بهتر و ارزشمندتری را برای شما فراهم کنم. در صورت داشتن هرگونه سوال هم در قسمت دیدگاه ها میتونید با بنده در ارتباط باشید