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

}

}

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

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

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

 

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

 

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

بعد از نوشتن اولین دستور برنامه نویسی، بهتر است با مفهوم این دستورات آشنا شویم. همانطور که ملاحظه کردید، میان یک دستور جاوا با اچ تی ام ال، تفاوت است. اچ تی ام ال، یک صفحه ساده و ثابت را به ما می دهد؛ و جاوا، یک صفحه متحرک و هوشمند. با اچ تی ام […]

ادامه مطلب
پارامتر
پارامتر در جاوا اسکریپت

در این بخش به معرفی پارامتر در جاوا اسکریپت می پردازیم: پارامترهای اسکریپت: تگ اسکریپت، پارامترهایی دارد که با آنها آشنا می شویم. به این خط دقت کنید: <script language=”JavaScript” src=””> پارامتر زبان (language) ۱-اولین پارامتری که به چشم می خورد، زبان است. اسکریپت، یک زبان عمومی است که انواع و اقسامی دارد. یکی از […]

ادامه مطلب
کد جاوا اسکریپت
ویرایشگران کد جاوا اسکریپت

ویرایشگر کد که برنامه نویسان بیشتر وقت خود را می گذرانند.(کد جاوا اسکریپت) دو نوع اصلی ویرایشگر کد وجود دارد: IDE ها و lightweight editors. بسیاری از افراد از یک نوع از هر نوع استفاده می کنند. IDE اصطلاح IDE (محیط توسعه یکپارچه) به یک ویرایشگر قدرتمند و دارای بسیاری از ویژگی ها اشاره دارد […]

ادامه مطلب

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