javascript - אירוע שינוי מצב תיבת סימון ב-jQuery

אני רוצה שאירוע יופעל בצד הלקוח כאשר תיבת סימון נבחרת/מוסרת סימון:

$('.checkbox').click(function() {
  if ($(this).is(':checked')) {
    // Do stuff
  }
});

בעצם אני רוצה שזה יקרה לכל תיבת סימון בעמוד. האם השיטה הזו של הפעלה בלחיצה ובדיקת המצב בסדר?

אני חושב שצריך להיות דרך נקייה יותר ב-jQuery. מישהו יודע פתרון?

תשובה #1

קשר לאירוע change במקום click. עם זאת, סביר להניח שעדיין תצטרך לבדוק אם תיבת הסימון מסומנת או לא:

$(".checkbox").change(function() {
    if(this.checked) {
        //Do stuff
    }
});

היתרון העיקרי של חיבור לאירוע change במקום לאירוע click הוא שלחיצות לא כולן על תיבת הסימון יגרמו לה לשנות מצב. אם אתה רוצה ללכוד רק אירועים שגורמים לתיבת הסימון לשנות מצב, אתה רוצה את האירוע ששמו מתאים change. נמחק בתוך תגובות

שים לב גם כי השתמשתי ב-this.checked במקום לעטוף את האלמנט באובייקט jQuery ולהשתמש בשיטות jQuery, פשוט מכיוון שזה קצר יותר ומהיר יותר לגשת לתכונה של אלמנט ה-DOM ישירות.

ערוך (ראה הערות)

כדי לקבל את כל תיבות הסימון יש לכם כמה אפשרויות. אתם יכולים להשתמש ב-:checkbox פסו-סלקטור:

$(":checkbox")

או שאתה יכול להשתמש בבוחר של שוויון תכונה:

$("input[type='checkbox']")

תשובה #2

לצורך התייחסות עתידית לכל מי שמתקשה כאן, אם אתם מוסיפים את תיבות הסימון באופן דינמי, התשובה הנכונה והמקובלת למעלה לא תעבוד. תצטרכו להשתמש בהאצלת אירועים שמאפשרת לצומת אב ללכוד אירועים שפורצים מצאצא מסוים ולהוציא קריאת חזרה.

// $(<parent>).on('<event>', '<child>', callback);
$(document).on('change', '.checkbox', function() {
    if(this.checked) {
      // checkbox is checked
    }
});

שים לב שלרוב אין צורך להשתמש ב-document כבוחר ההורה. במקום זאת, בחר צומת הורה יותר ספציפי כדי למנוע הפצת האירוע למעלה יותר מידי רמות.

הדוגמה למטה מציגה כיצד האירועים של צמתים שנוספו באופן דינמי ל-DOM אינם מפעילים מאזינים שהוגדרו קודם לכן.

$postList = $('#post-list');

$postList.find('h1').on('click', onH1Clicked);

function onH1Clicked() {
  alert($(this).text());
}

// simulate added content
var title = 2;

function generateRandomArticle(title) {
  $postList.append('<article class="post"><h1>Title ' + title + '</h1></article>');
}

setTimeout(generateRandomArticle.bind(null, ++title), 1000);
setTimeout(generateRandomArticle.bind(null, ++title), 5000);
setTimeout(generateRandomArticle.bind(null, ++title), 10000);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="post-list" class="list post-list">
  <article class="post">
    <h1>Title 1</h1>
  </article>
  <article class="post">
    <h1>Title 2</h1>
  </article>
</section>

בעוד שהדוגמה הזו מציגה את השימוש בהאצלת אירועים כדי ללכוד אירועים עבור צומת ספציפי (h1 במקרה זה), ולהוציא קריאה חוזרת עבור אירועים כאלה.

$postList = $('#post-list');

$postList.on('click', 'h1', onH1Clicked);

function onH1Clicked() {
  alert($(this).text());
}

// simulate added content
var title = 2;

function generateRandomArticle(title) {
  $postList.append('<article class="post"><h1>Title ' + title + '</h1></article>');
}

setTimeout(generateRandomArticle.bind(null, ++title), 1000); setTimeout(generateRandomArticle.bind(null, ++title), 5000); setTimeout(generateRandomArticle.bind(null, ++title), 10000);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="post-list" class="list post-list">
  <article class="post">
    <h1>Title 1</h1>
  </article>
  <article class="post">
    <h1>Title 2</h1>
  </article>
</section>

תשובה #3

סתם פתרון נוסף

$('.checkbox_class').on('change', function(){ // on change of state
   if(this.checked) // if changed state is "CHECKED"
    {
        // do the magic here
    }
})

תשובה #4

אם הכוונה שלך היא לחבר אירוע רק לתיבות סימון שסומנו (כך שהוא יופעל כאשר הן יסומנו ויבוטלו מאוחר יותר), אז זה מה שאתה רוצה.

$(function() {
    $("input[type='checkbox']:checked").change(function() {

    })
})

אם הכוונה שלך היא לחבר אירוע לכל תיבות הסימון (מסומנות ולא מסומנות)

$(function() {
    $("input[type='checkbox']").change(function() {

    })
})

אם אתה רוצה שזה יופעל רק כשבודקים אותם (מבלתי מסומן), אז תשובת @James Allardice למעלה.

אגב input[type='checkbox']:checked הוא בורר CSS.

תשובה #5

זה מאוד פשוט, כך אני משתמש:

JQuery:

$(document).on('change', '[name="nameOfCheckboxes[]"]', function() {
    var checkbox = $(this), // Selected or current checkbox
        value = checkbox.val(); // Value of checkbox

    if (checkbox.is(':checked'))
    {
        console.log('checked');
    }else
    {
        console.log('not checked');
    }
});

בברכה!