Question

Consider a simple each loop to inspect checked checkboxes:

$(':checkbox').filter(':checked').each(function(){
    var name = $(this).val();
});

This code works for checkboxes checked in the original HTML code as

<input type="checkbox" name="test" value="test" checked="checked" />

How to make this jQuery code to work live, to perform the filter process every time a new box is checked or a checked is removed. I want to run the each loop upon any change in the checkbox (checked or unchecked) to return the updated values of currently checked ones.

NOTE: This is a simplified code to express the issue. The intention is not to record the name, but processing checked values in the each loop.

Answer 1

Use click:

$(':checkbox').click(function() {
    $(':checkbox').filter(':checked').each(function() {
        var name = this.value;
    });
});

Notes:

• You can avoid query the DOM so many times.
• :checkbox is a very slow selector, because it’s not a css selector but a jQuery extension.
• Don’t use jQuery to get this value.

You can improve your code like that:

var $checkboxes = $('input[type="checkbox"]');
$checkboxes.filter(':checked').each(function() {
    var name = this.value;
});

Reading resources:

• The cost of $(this)
• Why we prefix our variables with $ in jQuery