روشهای بررسی تیک خوردن Checkbox در Javascript و jQuery

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

روشهای بررسی تیک خوردن Checkbox در Javascript و jQuery

روشهای بررسی تیک خوردن Checkbox در Javascript و jQuery

در این مطلب میخوام روشهای مختلفی که با استفاده از اونا میتونین از تیک خوردن Checkbox در Javascript و jQuery مطلع بشید  رو بهتون آموزش بدم. روشهای زیادی برای انجام اینکار وجود داره و در ادامه متداول‌ترین اونا رو بررسی میکنیم.

در ابتدا کدهای HTML که میخوایم با اونا کار کنیم رو قرار میدم:

<label>
  <span>Check this to show text</span>
  <input type="checkbox" id="isAgeSelected"/>
</label>

<br><br>

<div id="txtAge" style="display:none">Age is something</div>

میبینید که یک checkbox با id = isAgeSelected قرار داده شده است. در انتها هم یک div وجود داره که id اون txtAge هست و در ابتدا هم اون رو مخفی کردیم و میخوایم با تیک خوردن چک باکس اون رو نشون بدیم.

روش اول: با استفاده از Javascript خالص

var txtAge = document.getElementById('txtAge');

document.getElementById('isAgeSelected').onchange = function (event) {
  if (event.target.checked) {
    txtAge.style.display = 'block';
  } else {
    txtAge.style.display = 'none';
  }
};

میبینید که رویداد onchange برای چک باکس رو تعریف کردیم و زمانی که event.target.checked برابر با true باشه میفهمیم که چک باکس تیک خورده است و در این صورت متن مورد نظر رو نشون میدیم و در غیر اینصورت متن مورد نظر مخفی میشه.

روش دوم: با استفاده از jQuery و رویداد کلیک

کد زیر رو ببینید:

$(function() {
  $('#isAgeSelected').click(function() {
    $("#txtAge").toggle(this.checked);
  });
});

همونطور که میبینید در اینجا از toggle استفاده کردیم و زمانی که this.checked برابر با true باشه، متن مورد نظر نشون داده میشه و در غیر اینصورت مخفی میمونه.

روش سوم: استفاده از متد is

برای اینکار بصورت زیر عمل میکنیم:

$(function() {
  $('#isAgeSelected').on('change', function() {
    if ($(this).is(':checked')) {
      $("#txtAge").show();
    } else {
      $("#txtAge").hide();
    }
  });
});

در اینجا از متد is استفاده شده و بررسی میکنه که :checked در checkbox وجود داره یا نه.

روش چهارم: استفاده از متد prop

$(function() {
  $('#isAgeSelected').on('change', function() {
    if ($(this).prop('checked')) {
      $("#txtAge").show();
    } else {
      $("#txtAge").hide();
    }
  });
});

در اینجا هم همانند روش قبل عمل کردیم با این تفاوت که بجای متد is از prop استفاده کردیم. متد prop از jQuery نسخه 1.6 به بالا وجود داره و قبل از اون نمیتونین از این ورژن استفاده کنید.

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

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

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

اسماعیل

ممنون
لطفا مطالب آموزشی زیادی بزارید

نازنین کریمی مقدم

سلام. ممنون که با ما همراه هستید.
آموزش مربوط به فریمورکهای جاوا اسکریپت در دست تهیه هست.

الهه

عالی بود ممنون. واقعا کارمو راه انداخت. نتونستم تشکر نکنم 🙂

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