طراحی وب سایت در کرج
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);

}

}

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

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

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

 

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

 

پست مرتبط
HTML5 | طراحی سایت | طراحی وب سایت در کرج | کیان تجارت فاوا
توسعه HTML5

توسعه HTML5 توسعه HTML5 تلاش مداوم یک کنسرسیوم از بسیاری از توسعه دهندگان نرم افزار و دیگر گروه های صنعت علاقه مند برای به روز رسانی و تجدید نظر در زبان نشانه گذاری بیش از حد (HTML)، که زبان اصلی در قلب وب جهان گستر است. گروه کار فناوری کاربرد وب Hypertext (WHATWG) در سال […]

ادامه مطلب
جاوا اسکریپت | طراحی سایت در کرج | طراحی وب سایت در کرج | هلدینگ کیان تجارت فاوا
مزایا و معایب جاوا اسکریپت برای طراحی وب

مزایا و معایب جاوا اسکریپت برای طراحی وب این مقاله در مورد نکات خوب و بد استفاده از جاوا اسکریپت در طراحی وب سایت شما بحث می کند. این موارد مواردی را مطرح می کند که جاوا اسکریپت به عنوان یک زبان برنامه نویسی مبتنی بر وب پیشرفت می کند و همچنین شرایطی را بیان […]

ادامه مطلب
jQuery |طراحی سایت در کرج | طراحی سایت در کرج | هلدینگ کیان تجارت فاوا
برخی از تفاوت های بین JQuery و جاوا اسکریپت

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

ادامه مطلب

دیدگاهتان را بنویسید