How to check checkbox in each loop

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.

Nobody follows the "each" tag. EDIT: WAIT, there are two guys following it. My bad. — temporary_user_name
– temporary_user_name, Commented May 20, 2012 at 1:04
@Aerovistae. We (jquery users) have that jquery-each tag... EDITED. anyway the tags are not just for the followers. — gdoron
– gdoron, Commented May 20, 2012 at 1:24

Community · Accepted Answer · 2017-05-23 12:11:28Z

2

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:

edited May 23, 2017 at 12:11

CommunityBot

11 silver badge

answered May 20, 2012 at 1:16

gdoron

151k59 gold badges302 silver badges376 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Googlebot Over a year ago

I really like the way you answer, I learned a lot. Don't worry about name, it is a long process with checked values. It is very simplified code to discuss the issue. I deeply appreciate your concern about performance, what most of people simply ignore :) I wish I could give +10 for this!

gdoron Over a year ago

@Ali. I'm glad I could help. I added reading resources to the answers. Good luck.

freejosh · Accepted Answer · 2012-05-20 01:09:35Z

1

You would need to bind your loop to the change event for the checkboxes.

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

answered May 20, 2012 at 1:09

freejosh

11.4k4 gold badges36 silver badges47 bronze badges

3 Comments

Googlebot Over a year ago

it works perfectly, but has one problem. It will start to work upon first change. I mean it will not work for default checked values (those checked in the original html code).

gdoron Over a year ago

@Ali. Then use click instead. I posted it as an answer...

freejosh Over a year ago

@Ali, just run the inner loop once the page is loaded, either before or after you bind it. Better yet, put the inner loop in a separate function so that you'd just call it once when the page is loaded, and bind it to the event.

Sampson · Accepted Answer · 2012-05-20 03:11:31Z

1

Since you're performing a loop, I'm assuming there can be many checked boxes. I'm a little confused why you would be overwriting the name variable each time though, leaving you only with the value of the last checkbox in the end. Instead, I'm providing an array which we push all checked values onto:

// Declare a names variable for storing values
var names;

// Any time a checkbox changes on our form
$("form").on("change", ":checkbox", function(e){
  // Empty the names array
  names = [];
  // Get all checked checkboxes from our form and add their value to our array
  $(":checkbox:checked", e.delegateTarget).each(function(){
    names.push( $(this).val() ); 
  });
}).find("input:checkbox").trigger("change");

// Method of revealing what we currently have checked
$("#reveal").on("click", function(){
  alert( names.join(", ") );
});

Demo: http://jsbin.com/uyecux/2/edit

edited May 20, 2012 at 3:11

answered May 20, 2012 at 1:29

Sampson

269k76 gold badges546 silver badges570 bronze badges

2 Comments

Googlebot Over a year ago

As I added to a NOTE, name was a simplified example to complete the loop. The actual process is quite long. Thanks for your attention.

gdoron Over a year ago

Hey Jonathan, you could use .map instead of pushing elements to array. Do you want me to give an example?

jpgrace · Accepted Answer · 2012-05-20 01:10:48Z

0

You need to create an event handler. In jQuery, this might look like this:

$(':checkbox').on('change', function() {
  // Execute your code here.
});

See the jQuery documentation here: http://api.jquery.com/on/ for more details on event handling in jQuery.

answered May 20, 2012 at 1:10

jpgrace

4014 silver badges9 bronze badges

Comments

Krishanu Dey · Accepted Answer · 2012-05-20 01:13:20Z

0

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

Try using above function.

answered May 20, 2012 at 1:13

Krishanu Dey

6,4067 gold badges53 silver badges69 bronze badges

Collectives™ on Stack Overflow

How to check checkbox in each loop

5 Answers 5

2 Comments

3 Comments

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

3 Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related