از طریق منوی جستجو مطلب مورد نظر خود در وبلاگ را به سرعت پیدا کنید
چک کردن چک باکس در jQuery و JavaScriptCheckboxها یکی از انواع فیلدهای ورودی هستند که ما معمولاً برای اینکه به کاربران امکان تعامل با صفحات وب و معمولاً ارسال داده‌ها به پشتیبان را با علامت زدن هر کادری که در یک موقعیت خاص اعمال می‌شود، استفاده کنیم. . برخلاف دکمه های رادیویی (که متعلق به گروه های رادیویی هستند) -…
سرفصلهای مطلب
چک باکس ها یکی از انواع مختلفی از فیلدهای ورودی هستند که ما معمولاً برای اینکه به کاربران امکان تعامل با صفحات وب و معمولاً ارسال داده ها به یک backend را می دهیم، استفاده می کنیم. چک کردن هر جعبه ای که برای یک موقعیت خاص اعمال می شود.
برخلاف دکمه های رادیویی (که متعلق به گروه های رادیویی) – چک باکس های متعلق به یک گروه واحد متقابل نیستند بنابراین کاربر می تواند انتخاب کند جعبه های متعدد که اعمال می شود. هنگام بررسی اینکه آیا گزینه ای انتخاب شده است، باید این را در نظر داشته باشید.
در این راهنما، روش بررسی چک باکس در jQuery – یک کتابخانه محبوب برای جاوا اسکریپت و Vanilla JavaScript – را بررسی خواهیم کرد.
عنصر.بررسی شد
بیایید با یک تنظیم ساده Checkbox شروع کنیم:
<h1>Check if Checkbox is Checked</h1>
<p>Have you taken this test before?</p>
<input type="checkbox" id="takenBefore" placeholder="Yes">
<label for="takenBefore">Yes</label>
<button id="button"> Check Checkbox </button>
در جاوا اسکریپت خالص – بررسی اینکه آیا یک چک باکس علامت زده شده است به آسانی دسترسی به آن است checked فیلد، که با یک بولی نشان داده می شود:
// Get relevant element
checkBox = document.getElementById('takenBefore');
// Check if the element is selected/checked
if(checkBox.checked) {
// Respond to the result
alert("Checkbox checked!");
}
با این حال، این کد تنها زمانی اجرا می شود که شما به طور خاص آن را اجرا کنید. به عنوان مثال، زمانی که کاربر فرمی را ارسال می کند یا می خواهد به فرم بعدی ادامه دهد، می توانید آن را اجرا کنید page به عنوان یک مرحله اعتبار سنجی اعتبارسنجی معمولاً به این روش انجام نمی‌شود و معمولاً به کتابخانه‌هایی که قوی‌تر هستند واگذار می‌شود. معمولاً، شما می خواهید برای تغییر چیزی به چک باکس واکنش نشان دهید روی را page – مانند ارائه دیگر گزینه های ورودی
در این موارد، شما می خواهید یک را اضافه کنید شنونده رویداد روی دکمه، و اجازه دهید به رویدادها گوش دهد، مانند در حال کلیک کردن. هنگامی که چنین رویدادی رخ می دهد – می توانید تصمیم بگیرید که به رویداد پاسخ دهید:
checkBox = document.getElementById('takenBefore').addEventListener('click', event => {
if(event.target.checked) {
alert("Checkbox checked!");
}
});
در این تنظیمات – کد دائماً منتظر است و به رویدادها گوش می دهد روی عنصر! اکنون به محض اینکه کسی کلیک کرد چک باکس، شما alert() روش اجرا خواهد شد. این بار، با این حال، برای به دست آوردن checkBox عنصر، ما آن را از event به عنوان مثال، به عنوان target از آن رویداد
وقتی در را باز می کنید page در یک مرورگر، و روی دکمه کلیک کنید، با استقبال مواجه خواهید شد:
$(‘#element’)(0).بررسی شد
توجه داشته باشید: jQuery یک کتابخانه محبوب جاوا اسکریپت است که در آن وجود دارد زیاد پروژه های سراسر جهان به دلیل وزن سبک و ویژگی هایی که دامنه قابلیت های داخلی جاوا اسکریپت را گسترش می دهد – به یک اصلی. جای تعجب نیست – می توان از آن برای بررسی اینکه آیا یک Checkbox انتخاب شده است یا نه استفاده کرد.
ما می‌توانیم از نحو انتخابگر jQuery به جای جاوا اسکریپت خالص استفاده کنیم تا هم انتخاب عنصر و هم شنونده رویداد متصل به آن را ساده کنیم.
تو می توانی import jQuery در شما page از طریق a شبکه تحویل محتوا (CDN). شما می توانید از CDN خود جی کوئری برای وارد کردن کتابخانه نیز استفاده کنید.
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous">
</script>
برای بررسی اینکه آیا یک Checkbox علامت زده شده است یا خیر، در jQuery، می توانید به سادگی عنصر را انتخاب کنید، شی زیربنایی آن را به جای شی jQuery دریافت کنید ((0)) و از داخلی استفاده کنید checked ویژگی:
let isChecked = $('#takenBefore')(0).checked
console.log(isChecked);
در اینجا، ما باید آزمایش کنیم اگر takenBefore چک باکس با دسترسی به آن از طریق انتخابگر jQuery و استفاده از ذاتی علامت زده می شود. checked میدانی مثل قبل
از طرف دیگر، می‌توانید شنونده‌ای را تعریف کنید که تغییر را تشخیص دهد:
$('#takenBefore').change(function() {
alert('Checkbox checked!');
});
این کد بسیار ساده‌تر است، اما عملکردی تقریباً مشابه راه‌حل خالص JS دارد! با کلیک بر روی جعبه انتخاب، هشداری مانند قبل ایجاد می شود:
$(‘#element’).is(‘:checked’))
به جای بررسی از طریق داخلی checked ویژگی – ما می توانیم منطق را به is() روش. این is() متد یک روش کلی است که می تواند برای اهداف زیادی استفاده شود – و a را برمی گرداند true/false مستقر روی معیارهای مقایسه این :checked انتخابگر به طور خاص برای بررسی اینکه آیا یک دکمه رادیویی یا عنصر چک باکس انتخاب شده است یا خیر ساخته شده است.
بنابراین، اگر اینها را با هم ترکیب کنید، بررسی اینکه آیا یک چک باکس وجود دارد یا خیر، آسان است is(':checked'):
let isChecked = $('#takenBefore').is(':checked');
console.log(isChecked); // true (if checked at the time)
$(‘#element’).prop(“بررسی شد”)
در نسخه های قبلی jQuery – attr() برای دسترسی و دستکاری فیلدهای عناصر استفاده شد. در نسخه های جدیدتر، روش جایگزین شد prop(). این می تواند به عنوان یک گیرنده/تنظیم کننده برای ویژگی های عناصر، و در مورد ما – به عنوان یک پوشش برای بدست آوردن checked ویژگی یک عنصر
let isChecked = $('#takenBefore').prop('checked');
console.log(isChecked); // true (if checked at the time)
است() در مقابل prop()?
بنابراین، چه تفاوتی بین آنها وجود دارد
is()وprop()در این زمینه؟
به نظر می رسد هر دو روش از دیدگاه ما تقریباً یکسان عمل می کنند. بنابراین، چه تفاوتی دارد؟
is() پردازش و تجزیه سربار کمی بیشتر از prop(). حتی با در نظر گرفتن این واقعیت که prop() نمی کند فقط به ملک دسترسی پیدا می کند و انجام می دهد مقداری اعتبارسنجی، زمانی که نوبت به پردازش تعداد زیادی از ورودی ها می شود، مثلاً در یک حلقه، کارایی بیشتری دارد.
از سوی دیگر – is() همیشه a برمی گرداند boolean ارزش، در حالی که prop() فقط نوع خاصیت اصلی را برمی گرداند. شما نمی توانید تضمین کنید که چیز دیگری به صورت مخفیانه وارد شده است و اگر از آن استفاده نکنید ممکن است کد شما در زمان اجرا خراب شود. prop() به درستی. is() همچنین معنایی نشان می دهد مقدار بازگشتی – a boolean، که آن را به گزینه ای خواناتر تبدیل می کند.
نتیجه
در این راهنمای کوتاه، ما نگاهی به روش بررسی اینکه آیا یک چک باکس با جاوا اسکریپت و جی کوئری بررسی شده است را بررسی کرده ایم.
ما استفاده کرده ایم checked دارایی – به طور مستقیم و غیر مستقیم و به دنبال آن is() و prop() روش ها، و همچنین نگاهی گذرا به اینکه کدامیک را می توانید ترجیح دهید.
منتشر شده در 1403-01-14 05:09:05
