پنهان کردن CheckBox با استفاده از jQuery

در این مقاله با هم خواهیم دید که چگونه میتوان عملیات پنهان کردن CheckBox بر روی یک Label را با استفاده از jQuery پیاده سازی  کرد. در اینجا من متد jQuery را شامل hide() و show() و چگونگی یافتن Id کنترل ها میباشد. به همراه کد ها و پیشروی گام به گام برایتان سورس آن نیز قرار داده شده است. امیدوارم از آن استفاده ببرید …
پنهان کردن CheckBox
بخش ورودی

گام اول

ویژوال استودیوی خود را باز کنید و یک وب سایت خالی ایجاد کنید و نامی مناسب همانند HideCheckboxOnLabel برای آن انتخاب کنید.

گام دوم

در قسمت Solution Explorer پس از دریافت وب سایت خالیتان ، وب فرم ها را اضافه کنید.

برای وب فرم بر روی پروژه تان راست کلیک کنید و بر روی گزینه ی Add New Item بروید و Web Form را انتخاب کنید و نام hidecheckboxonlabel.aspx را برای آن برگزینید.
بخش طراحی

گام سوم

فایل hidecheckboxonlabel.aspx را باز کنید و مقداری کد برای طراحی برنامه خود بنویسید.

ابتدا یک jQuery Plugin به قسمت head خود اضافه کنید. در اینجا من از jquery-2.1.4.min.js plugin برای هدف های ظاهری استفاده میکنم.

چگونه آن را به صفحه تان اضافه کنید

 یک کنترل به صفحه تان اضافه کنید که همانند زیر خواهد بود :

 حال طراحی شما به صورت زیر خواهد بود :

Hide-CHeckBox-using-jQuery-1

حال مقداری Script برای jQuery خود مینویسیم.

در زیر مقداری کد مربوط به نمایش و پنهان کردن jQuery را مینویسیم.

 حال صفحه ی شما به صورت زیر خواهد بود :

Hidecheckboxonlable.aspx.cs :

 کد های صفحه ی Code Behind :

در این قسمت احتیاجی به نوشتن کدی نیست زیرا من هر چیزی که لازم داشته ایم را قبلا اضافه کرده ام.

خروجی

وقتی به صورت پیش فرض بارگذاری میشود

Hide-CHeckBox-using-jQuery-2

بارگذاری پس از کلیک بر روی Label

Hide-CHeckBox-using-jQuery-3

پس از کلیک دوباره بر روی آن

Hide-CHeckBox-using-jQuery-4

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

 

دانلود سورس کد
پسورد : csharpoop.com
پیش نمایش

پنهان کردن CheckBox با استفاده از jQuery
امتیاز دهید

(402 نوشته)

C# Programmer , Web Design And Developer , MVC , ASP.NET

فکر شما چیست؟

آدرس ایمیل شما منتشر نخواهد شد. بخشهای موردنیاز علامتگذاری شدهاند *

حاصل جمع اعداد را وارد کنید : *