تخفیف ویژه

روش تشخیص Radio انتخاب شده با jQuery

دسته بندی: آموزش
زمان مطالعه: 2 دقیقه
۱۵ اردیبهشت ۱۳۹۷

روش تشخیص Radio انتخاب شده با jQuery

روش تشخیص Radio انتخاب شده با jQuery

در این مطلب میخوام به شما روش تشخیص Radio انتخاب شده با jQuery رو آموزش بدم و یاد بگیریم که چطور اونا رو مدیریت کنیم.

فرض کنید که کدهای HTML بصورت زیر هستند:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form id="myForm">
  <input type="radio" name="radioName" value="1" /> 1 <br />
  <input type="radio" name="radioName" value="2" /> 2 <br />
  <input type="radio" name="radioName" value="3" /> 3 <br />
</form>

همونطور که میبینید jQuery رو در ابتدا لود کردیم و بعد از اون فرم مورد نظر با id = myForm رو قرار دادیم. درون فرم 3 عدد radio هست که همه اونا name یکسانی رو دارند. به این خاطر نام همه این Radio‌ها رو یکی قرار دادیم تا در هر لحظه فقط یکی از اونا انتخاب بشن و در یک گروه قرار بگیرن. برای هر کدام هم یک value قرار دادیم و میخوایم به value رادیو انتخابی دسترسی پیدا کنیم.

حالا میتونیم با استفاده از jQuery و رویداد onchange به مقدار رادیو انتخابی دسترسی پیدا کنیم. روش اولی که میتونیم استفاده کنیم از event.target.value هست. بصورت زیر:

$('input[type=radio]').on('change', function(event) {
  console.log(event.target.value);
});

حالا هر radio رو که انتخاب کنید، مقدار اون در Console چاپ میشه.

روش بعدی استفاده از ویژگی :checked و متد val هست. بصورت زیر:

$('input[type=radio]').on('change', function(event) {
  console.log($('input[name=radioName]:checked', '#myForm').val());
});

همونطور که میبینید در اینجا مقدار اون رادیویی که checked هست رو در Console چاپ میکنیم. روش ساده‌تری هم برای انجام این کار وجود داره. بصورت زیر:

$('input[type=radio]').on('change', function(event) {
  console.log($(this).val());
});

میبینید که در اینجا از this استفاده کردیم و مقدار اون المنتی که در حال تغییر هست رو در Console چاپ کردیم.

به همین راحتی.

اگر شما هم روشی برای انجام اینکار به ذهنتون میرسه خوشحال میشیم که در بخش نظرات با ما در میان بذارید.

چه امتیازی به این مقاله می دید؟
نویسنده محمد اسفندیاری
بسیار به طراحی وب علاقمندم و به سرعت در حال یادگیری تمام مباحث پیشرفته هستم و دوست دارم که به دیگران هم یاد بدهم.

نظرات کاربران

اولین دیدگاه این پست رو تو بنویس !

ارسال دیدگاه
خوشحال میشیم دیدگاه و یا تجربیات خودتون رو با ما در میون بذارید :