javascript - jQuery checkbox markerat tillstånd ändrat händelse

Jag vill att ett evenemang ska utlösas på klientsidan när en kryssruta markeras/avmarkeras:

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

I princip vill jag att det ska hända för varje kryssruta på sidan. Är denna metod att utlösa vid klick och kontrollera tillståndet okej?

Jag tänker att det måste finnas ett renare jQuery-sätt. Vet någon en lösning?

Svar #1

Bind till change-händelsen istället för click. Du kommer dock troligen fortfarande behöva kontrollera om kryssrutan är markerad eller inte:

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

Huvudfördelen med att binda till change-händelsen istället för click-händelsen är att inte alla klick på en kryssruta kommer att orsaka att den ändrar tillstånd. Om du bara vill fånga händelser som får kryssrutan att ändra tillstånd, vill du använda den lämpligt namngivna change-händelsen. Redigerat i kommentarer

Observera också att jag har använt this.checked istället för att omsluta elementet i ett jQuery-objekt och använda jQuery-metoder, helt enkelt eftersom det är kortare och snabbare att direkt komma åt egenskapen hos DOM-elementet.

Redigera (se kommentarer)

För att få alla kryssrutor har du några alternativ. Du kan använda :checkbox-pseudoväljaren:

$(":checkbox")

Eller så kan du använda en attribut-likamed-väljare:

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

Svar #2

För framtida referens till alla här som har svårigheter, om du lägger till kryssrutorna dynamiskt kommer det korrekta accepterade svaret ovan inte att fungera. Du kommer att behöva använda händelsedelegering, vilket tillåter en föräldernod att fånga upp bubblade händelser från en specifik avkomma och utföra en callback.

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

Observera att det nästan alltid är onödigt att använda document för föräldraväljaren. Välj istället en mer specifik föräldranod för att förhindra att händelsen sprids uppåt för många nivåer.

Exemplet nedan visar hur händelser på dynamiskt tillagda DOM-noder inte utlöser tidigare definierade lyssnare.

$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>

Medan detta exempel visar användningen av händelsedelegering för att fånga händelser för en specifik nod (h1 i detta fall), och utfärda en återuppringning för sådana händelser.

$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>

Svar #3

Bara en annan lösning

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

Svar #4

Om din avsikt är att bara bifoga händelsen till markerade kryssrutor (så att den utlöses när de avmarkeras och markeras igen senare) så är detta vad du vill.

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

    })
})

om din avsikt är att koppla en händelse till alla kryssrutor (markerade och omarkerade)

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

    })
})

om du vill att det bara ska utlösas när de blir markerade (från omarkerade) då är @James Allardice svar ovan.

Förresten, input[type='checkbox']:checked är en CSS-väljare.

Svar #5

Är mycket enkelt, detta är sättet jag använder:

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');
    }
});

Hälsningar!

Relaterade artiklar