طراحی وب سایت در کرج
026-34204893
09101013858

جعبه های انتخاب شده را با جی کوئری انتخاب و تنظیم کنید

جعبه های انتخاب شده را با جی کوئری انتخاب و تنظیم کنید

جعبه های انتخاب شده را با جی کوئری انتخاب و تنظیم کنید

در موارد متعددی، ما برای استفاده از گزینه چک باکس مبتنی بر شبکه استفاده کرده ایم. ما مطمئن هستیم که همه آنها را دیده اید، کادر انتخاب را در بالای شبکه انتخاب می کنید، و کادرهای همه بچه ها یا بسته به وضعیت والد خود را چک کرده یا علامت گذاری شده اند.

بگذارید بگوییم فرم HTML زیر را داریم.

بعضی از نام ها

میکی موس

اردک دونالد

المر فود

این کاملا یک فرم ساده است. فقط یک سلول از سلول ها در یک فرم پیچیده شده است.

 

ما همچنین در آنجا قرار می دهیم که ما برای نشان دادن کاربر چندین مورد انتخاب می کنیم (فقط در صورتی که نمیتوان آنها را حساب کرد).

اکنون این فقط کد سمت سرویس گیرنده برای صفحه است. در یک مثال عملی، کد سمت سرور وجود دارد که داده ها را از نوعی از منبع داده بازیابی می کند و جدول را پر می کند. کد سمت سرور می تواند وضعیت چک شده را برای کادر انتخاب را برای ما تنظیم کند. بزرگ، کار کمتر برای ما انجام می شود.

بیایید ببینید که جاوا اسکریپت چگونه خواهد بود.

اولا، ما باید رویداد کلیک را در جعبه چک کنید. در آن زمان، ما بررسی خواهیم کرد که کادر انتخاب شده در حال حاضر بررسی شود یا نه، و برخی از موارد را براساس وضعیت آن انجام دهید.

$(“input[name=ItemKey]”).click( function() {

if ( $(this).is(“:checked”) ){

// update all table cells in the current row with a class to indicate selection

// these could probably be chained.. let me know if you can do this better $(this).parent().addClass(“selected”);

$(this).parent().siblings().addClass(“selected”);

} else {

// remove the class to stop showing the row is selected

$(this).parent().removeClass(“selected”).addClass(“plain”);

$(this).parent().siblings().removeClass(“selected”).addClass(“plain”);

ChangeSelectedLabel();

});

 

// check if all or no checkboxes were set as checked by server-side script

 

SetToggleCheckBoxFromChildren();

 

بنابراین آنچه در اینجا اتفاق می افتد این است که رویداد کلیک کلاس ها را به سلول ها اعمال می کند تا کاربر را نشان دهد که ردیف انتخاب شده است. برای انجام این کار، عنصر اصلی کادر انتخاب انتخاب می کنیم.

سپس همه بچه های این عنصر را دریافت می کنیم (که باید کل ردیف باشد) و کلاس را به آن سلول ها اختصاص می دهیم. شما می توانید این کلاس را در یک شیوه قرار دهید و آن را فرمت کنید هر چند دوست دارید.

به طور مشابه، اگر کادر انتخاب بر روی رویداد کلیک برداشته شود، این کلاس را حذف میکنیم، به طوری که تمام سلولها در ردیف به سبک پیش فرض بازگشتهاند. این به طور کامل بستگی دارد که چگونه میز خود را سبک کنید.

اگر سلول ها در وضعیت پیش فرض هیچ سبک نداشته باشند، فقط کلاس “انتخاب شده” را حذف کنید، بدانید که در مورد استفاده از کلاس “ساده” نگران نباشید. همچنین یک تابع تماس وجود دارد که نشانگر برچسب را به روز می کند. بیایید در حال حاضر به آن نگاه کنیم.

 

function ChangeSelectedLabel() {

var count = $(“input[name=ItemKey]:checked”).length;

$(“#selectedCountLabel”).text(count + ” items selected”);

SetToggleCheckBoxFromChildren ()؛

}

 

این تابع مجموعه ای از متغیر برای کل موارد چک شده است. حتما نام جعبه چک را نشان داده اید، فقط در صورتی که گزینه های دیگری در فرم خود دارید، زیرا نمی خواهید کل کل شما به درستی محاسبه شود. سپس فاصله “selectedCountLabel” با متن دلخواه به روز می شود.

سپس ما یک تابع فراخوانی برای تابع SetToggleCheckBoxFromChildren می کنیم. بیایید به آن نگاه کنیم.

 

function SetToggleCheckBoxFromChildren() {

var TotalDeselectedItems = $(“input[name=ItemKey]:not(:checked)”).length;

if (TotalDeselectedItems == 0) {

$(“#selectallcheckboxes”).prop(“checked”, true);

} else {

$(“#selectallcheckboxes”).prop(“checked”, false);

}

}

خوب، بنابراین این تابع تنظیم وضعیت جعبه والدین را تنظیم می کند. می دانید، یکی در بالای جدول. ممکن است زمانی که اسکریپت سمت سرور صفحه را پر می کند که همه کادرهای جعبه را چک می کند.

در این وضعیت، ما می خواهیم جاوا اسکریپت سمت سرویس گیرنده گزینه چک کردن پدر و مادر را به حالت “چک” تنظیم کنیم. اگر ما این کار را نکنیم، گزینه انتخاب را انتخاب می کنیم. ممکن است متوجه شوید که این تابع در اولین بلوک جاوا اسکریپت نیز نامیده شده است.

این تابع متوجه می شود که آیا چکیده هایی وجود دارد که بررسی نشده اند (به یاد داشته باشید، از نام ما برای فیلتر کردن محدوده استفاده کنید). اگر آنها وجود نداشته باشند، کادر تأیید پدر و مادر را بررسی کنید.

 

امیدواریم مفید واقع شود.

 

پست مرتبط
مبانی جاوا اسکریپت

(مبانی جاوا اسکریپت) جاوا اسکریپت یک زبان برنامه نویسی است که تعامل با وب سایت شما را اضافه می کند (برای مثال بازی ها، پاسخ هایی که دکمه ها فشرده شده یا داده ها در فرم ها، یک ظاهر پویا، انیمیشن) وارد می شوند. این مقاله به شما کمک می کند تا با استفاده از […]

ادامه مطلب
مزایای CSS
مزایای CSS

مانند بسیاری از طراحان وب دیگر، من شروع به ساخت صفحات وب با استفاده از ابزارهای گرافیکی کردم و شگفتی های جداول را برای طرح کشف کردم بدون آنکه کسی به من بگوید که از آنها استفاده کند. از آنجا که مرورگر پشتیبانی از CSS بهتر از آن است که مورد استفاده قرار گرفته است، […]

ادامه مطلب
css
فواید css و آنچه باید درباره آن بدانید

وقتی وب سایت های اینترنتی شروع به ارائه محتوا کردند، همیشه روی صفحه نمایش کامپیوتر بود. سپس می توان یک کد HTML ایجاد کرد که محتویات آن را شامل می شود که شامل کد هایی است که از ویژگی های صفحه نمایش مراقبت می کند.با مات همراه باشید تا فواید css را بررسی کنیم. بنابراین شما […]

ادامه مطلب

پاسخی بگذارید