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, May 20 '12 at 01:04
@Aerovistae. We (jquery users) have that `jquery-each` tag... EDITED. anyway the tags are not **just** for the followers. — gdoron, May 20 '12 at 01:24

score 2 · Accepted Answer · edited May 23 '17 at 12:11

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 '17 at 12:11

Community

1
1

answered May 20 '12 at 01:16

gdoron

147,333
58
291
367

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! – Googlebot May 20 '12 at 01:36
@Ali. I'm glad I could help. I added reading resources to the answers. Good luck. – gdoron May 20 '12 at 01:52

score 1 · Answer 2 · answered May 20 '12 at 01:09

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 '12 at 01:09

freejosh

11,263
4
33
47

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). – Googlebot May 20 '12 at 01:14
@Ali. Then use `click` instead. I [posted it as an answer](http://stackoverflow.com/a/10670053/601179)... – gdoron May 20 '12 at 01:17
@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. – freejosh May 20 '12 at 01:20

Sampson · Answer 3 · 2012-05-20T03:11:31.910

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

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. — Googlebot, May 20 '12 at 01:43
Hey Jonathan, you could use `.map` instead of pushing elements to array. Do you want me to give an example? — gdoron, May 20 '12 at 01:45

score 0 · Answer 4 · answered May 20 '12 at 01:10

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.

score 0 · Answer 5 · answered May 20 '12 at 01:13

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 '12 at 01:13

Krishanu Dey

6,326
7
51
69

How to check checkbox in each loop

5 Answers5