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

روشهای بررسی تیک خوردن 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 استفاده شده و بررسی میکنه که [tag]:checked[/tag] در checkbox وجود داره یا نه.

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

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

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

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

 
ارسال دیدگاه
ما همه سوالات و دیدگاه ها رو می خونیم و پاسخ میدیم
۷ دیدگاه
سینا یوسفی ۱۴ شهریور ۱۴۰۰، ۰۱:۳۱
عال دمت گرم
نازنین کریمی مقدم ۱۴ شهریور ۱۴۰۰، ۰۱:۴۴
درود. خوشحالیم مقاله براتون مفید بوده :)
hamed ۲۰ مرداد ۱۴۰۰، ۱۹:۱۷
دمت گرم خیلی خوب بود
نازنین کریمی مقدم ۲۴ مرداد ۱۴۰۰، ۱۵:۱۸
خوشحالیم مقاله براتون مفید بوده دوست عزیز
اسماعیل ۱۹ مهر ۱۳۹۹، ۲۱:۰۹
ممنون
لطفا مطالب آموزشی زیادی بزارید
نازنین کریمی مقدم ۲۰ مهر ۱۳۹۹، ۱۰:۴۳
سلام. ممنون که با ما همراه هستید.
آموزش مربوط به فریمورکهای جاوا اسکریپت در دست تهیه هست.
الهه ۱۸ فروردین ۱۳۹۹، ۱۱:۰۳
عالی بود ممنون. واقعا کارمو راه انداخت. نتونستم تشکر نکنم :)