از طریق منوی جستجو مطلب مورد نظر خود در وبلاگ را به سرعت پیدا کنید
روش بررسی/انتخاب چک باکس با جی کوئری – جاوا اسکریپت در این راهنمای کوتاه، روش انتخاب عناصر چک باکس را خواهید آموخت روی را pageو آنها را در جاوا اسکریپت با Vanilla JavaScript و jQuery بررسی کنید. ما با این تنظیم ساده چک باکس کار خواهیم کرد: <h1>Check/Select Checkbox</h1> <p>آیا قبلا این تست را انجام داده اید؟…
سرفصلهای مطلب
در این راهنمای کوتاه، روش انتخاب عناصر چک باکس را خواهید آموخت روی را pageو آنها را در جاوا اسکریپت با Vanilla JavaScript و jQuery بررسی کنید.
ما با این تنظیم ساده چک باکس کار خواهیم کرد:
<h1>Check/Select Checkbox</h1>
<p>Have you taken this test before?</p>
<input type="checkbox" id="takenBefore">
<label for="takenBefore">Yes</label>
<button id="button"> Check Checkbox </button>
element.checked = درست است
ساده ترین راه برای بررسی یا انتخاب یک چک باکس، تنظیم صریح آن است checked میدان به true:
// Get Element
checkBox = document.getElementById('takenBefore');
// Set the `checked` field to `true`
checkBox.checked = true
برای نشان دادن این موضوع، بیایید یک شنونده رویداد را به یک دکمه وصل کنیم، که سپس به صورت برنامه‌ریزی، Checkbox را برای ما انتخاب می‌کند/بررسی می‌کند. این یک مثال خوش خیم است، اما به این نکته عمل می کند – شما بر اساس چک باکس را علامت می زنید/انتخاب می کنید روی مقداری اقدام از سوی کاربر:
document.getElementById('button').addEventListener('click', event => {
checkBox = document.getElementById('takenBefore');
checkBox.checked = true
});
این منجر به:
$(‘#element’)(0).checked = true
توجه داشته باشید: jQuery یک کتابخانه محبوب جاوا اسکریپت است که در آن وجود دارد زیاد پروژه های سراسر جهان به دلیل وزن سبک و ویژگی هایی که دامنه قابلیت های داخلی جاوا اسکریپت را گسترش می دهد – به یک اصلی.
ما می‌توانیم از نحو انتخابگر jQuery به جای جاوا اسکریپت خالص استفاده کنیم تا هم انتخاب عنصر و هم شنونده رویداد متصل به عناصر دیگر را که منجر به انتخاب کادر انتخاب می‌شوند، ساده کنیم. اگر قبلاً 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>
اکنون، با نصب jQuery – به راحتی می توانید آن را تنظیم کنید checked دارایی به true مانند قبل، اما با نحو ساده تر:
$('#takenBefore')(0).checked = true
در اینجا، ما یک را دریافت می کنیم جی کوئری شیء، نه عنصر زیربنایی با انتخابگر، بنابراین، ما باید آن را زیرنویس کنیم و شی زیربنایی را برای دسترسی به checked دارایی با (0).
به همین ترتیب، اگر بخواهیم این کد را بر اساس راه اندازی کنیم روی برخی اقدامات دیگر، مانند فشار دادن دکمه:
$('#button').روی('click', function() {
$('#takenBefore')(0).checked = true
});
این نحو نسبتاً ساده‌تر از آنچه قبلاً استفاده کرده‌ایم است، اگرچه از نظر عملکردی معادل است:
نقطه ضعف این رویکرد این است – این است خام. ما فقط از نحو انتخاب ساده تر استفاده کردیم، اما در نهایت فقط به طور صریح ویژگی را به true بعد از آن. راه دیگری برای تنظیم ویژگی وجود دارد، اما به طور ضمنی تر.
$(‘#element’).prop(“بررسی شده”، درست)
این prop() تابع مجموعه ای از آرگومان های کلید-مقدار را می پذیرد – نام ویژگی که می خواهیم به آن دسترسی داشته باشیم و مقداری که می خواهیم به آن اختصاص دهیم. خود متد اعتبار سنجی را انجام می دهد که وقتی به صراحت خاصیت را روی آن تنظیم می کنیم انجام نمی شود true مثل سابق.
به طور کلی، اگر قبلاً از jQuery استفاده می کنید، توصیه می شود از آن استفاده کنید
prop()به جای تنظیم صریح ویژگی، به دلیل مزیت اضافه اعتبارسنجی.
همانطور که گفته شد، تنظیم چک باکس برای علامت زدن/انتخاب شدن به آسانی:
$('#takenBefore').prop('checked', true);
و دوباره، از آنجایی که معمولاً تحریک می شود روی یک رویداد دیگر:
$('#button').روی('click', function() {
$('#takenBefore').prop('checked', true);
});
$(‘#element’).attr(“بررسی شده”، درست)
در نسخه های قدیمی jQuery، که ممکن است به دلیل محدودیت های پروژه مجبور به استفاده از آنها شوید، prop() تابع قبل از attr() تابع، که ویژگی های عناصر را تنظیم می کند.
در این زمینه، تقریباً به همان شیوه کار می کند prop():
$('#takenBefore').attr('checked', true);
و دوباره، از آنجایی که معمولاً تحریک می شود روی یک رویداد دیگر:
$('#button').روی('click', function() {
$('#takenBefore').attr('checked', true);
});
نتیجه
در این راهنمای کوتاه، ما نگاهی به روش تنظیم یک چک باکس با استفاده از Vanilla JavaScript و jQuery روی “checked”/sected انداخته ایم.
ما نگاهی به ساده‌ترین روش‌ها مانند تنظیم صریح ویژگی انداخته‌ایم و تا استفاده از روش‌های wrapper jQuery با اعتبارسنجی کار کرده‌ایم.
منتشر شده در 1403-01-13 16:08:04
