تیک زدن همه چک باکس ها با jQuery

تیک زدن همه چک باکس ها با کلیک بوسیله jQuery بسیار آسان است . در این روش به راحتی می توانید قابلیت select all کردن چک باکس ها را به فرم های خود اضافه کنید.

انتخاب و لغو همه چک باکس ها را با استفاده از یک رویداد کلیک و کد کوتاه در جی کوئری مدیریت می کنیم.

فرم گروه چک باکس ها (Checkbox)

این گروه از چک باکس به شما لیست چند کشور را نشان می دهد.

<div id="divCheckAll">
<input type="checkbox" name="checkall" id="checkall" onClick="check_uncheck_checkbox(this.checked);" />Check All</div>
<div id="divCheckboxList">
	<div class="divCheckboxItem"><input type="checkbox" name="language" id="language1" value="English" />English</div>
	<div class="divCheckboxItem"><input type="checkbox" name="language" id="language2" value="Iran" />Iran</div>
	<div class="divCheckboxItem"><input type="checkbox" name="language" id="language3" value="German" />German</div>
	<div class="divCheckboxItem"><input type="checkbox" name="language" id="language4" value="Latin" />Latin</div>
</div>

<input type="checkbox" name="checkall" id="checkall" onClick="check_uncheck_checkbox(this.checked);" />Check All</div>

<div class="divCheckboxItem"><input type="checkbox" name="language" id="language1" value="English" />English</div>

<div class="divCheckboxItem"><input type="checkbox" name="language" id="language3" value="German" />German</div>

<div class="divCheckboxItem"><input type="checkbox" name="language" id="language4" value="Latin" />Latin</div>

</div>

اسکریپت جی کوئری برای تیک زدن/برداشتن همه چک باکس ها

فرم بالا با کلیک بر روی چک باکس کناری گزینه Check All , یک رویداد کلیک را به جی کوئری ارسال می کند.

تابع jQuery بررسی می کند که آیا این چک باکس قبلا انتخاب شده است یا خیر . برا اساس وضعیت چک باکس موجود در هدر , با یک حلقه each تمام ورودی های input با نام laguage را تغییر می دهد.

function check_uncheck_checkbox(isChecked) {
	if(isChecked) {
		$('input[name="language"]').each(function() { 
			this.checked = true; 
		});
	} else {
		$('input[name="language"]').each(function() {
			this.checked = false;
		});
	}
}

function check_uncheck_checkbox(isChecked) {

if(isChecked) {

$('input[name="language"]').each(function() {

this.checked = true;

});

} else {

$('input[name="language"]').each(function() {

this.checked = false;

});

}

قابلیت تیک زدن همه چک باکس ها با jQuery که پیاده سازی کردیم , در مواقعی که قصد دارید یک سری عملیات را بر روی داده های موجود در یک جدول که اطلاعات آن را مثلا از دیتابیس خوانده اید , بسیار کاربردی است و در پروژه هایی که می نویسید از این کد در قسمت های بخصوص مدیریتی نهایت استفاده را ببرید .

امیدوارم مقاله آموزشی تیک زدن همه چک باکس ها با jQuery برای شما مفید واقع شده باشد.

برای دانلود سورس کد کامل این آموزش از باکس دانلود استفاده کنید.

هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .

موفق و پیروز باشید.

لغو پاسخ

امیر ۲۵ فروردین ۱۳۹۹

سلام و ممنون
من تازه کارم یعنی فقط html ,css ,bootstrap رو یاد دارم دارم سعی میکنم مطالب بیشتری رو یاد بگیرم
وخوشبختانه در سایت شما به این آرزوم دارم میرسم
ممنونم از شما…

پاسخ