Loop over html table and get checked checkboxes (JQuery)

Question

I have an HTML table with a checkbox in each row.
I want to loop over the table and see if there are any checkboxes that are checked.
The following does not work:

$("#save").click( function() {
    $('#mytable tr').each(function (i, row) {
        var $actualrow = $(row);
        checkbox = $actualrow.find('input:checked');
        console.log($checkbox);
});

This prints in the console the following:

[prevObject: jQuery.fn.jQuery.init[1], context: tr, selector: "input:checked", constructor: function, init: function…]

per row regardless of whether any checkbox is checked.

Update
Same issue with:

$('#mytable tr').each(function (i, row) {                                                                                                 
   var $actualrow = $(row);
    $checkbox = $actualrow.find(':checkbox:checked');
    console.log($checkbox);  
});

Yup, a jQuery object is printed to the console, which is normal. Did you check its length property? — Frédéric Hamidi
– Frédéric Hamidi, Commented Aug 20, 2013 at 9:51
Have you tried with $actualrow.find('input').is(':checked'); — Robert W. Hunter
– Robert W. Hunter, Commented Aug 20, 2013 at 9:52
@Jim, there you go. It means no checkbox was checked for that row. As for how to use it, you could write an if statement. — Frédéric Hamidi
– Frédéric Hamidi, Commented Aug 20, 2013 at 10:11

Minko Gechev · Accepted Answer · 2013-08-20 10:03:16Z

63

Use this instead:

$('#save').click(function () {
    $('#mytable').find('input[type="checkbox"]:checked') //...
});

Let me explain you what the selector does: input[type="checkbox"] means that this will match each <input /> with type attribute type equals to checkbox After that: :checked will match all checked checkboxes.

You can loop over these checkboxes with:

$('#save').click(function () {
    $('#mytable').find('input[type="checkbox"]:checked').each(function () {
       //this is the current checkbox
    });
});

Here is demo in JSFiddle.

And here is a demo which solves exactly your problem http://jsfiddle.net/DuE8K/1/.

$('#save').click(function () {
    $('#mytable').find('tr').each(function () {
        var row = $(this);
        if (row.find('input[type="checkbox"]').is(':checked') &&
            row.find('textarea').val().length <= 0) {
            alert('You must fill the text area!');
        }
    });
});

edited Aug 20, 2013 at 10:03

answered Aug 20, 2013 at 9:53

Minko Gechev

25.8k9 gold badges64 silver badges69 bronze badges

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

7 Comments

Jim Over a year ago

I want to get the individually.If a checkbox is checked but the textbox in the same row is not filled I want to show an alert

Jim Over a year ago

Ok, but how do I get the textbox in the next column of the same row to check if it is populated and if not show an alert?

Minko Gechev Over a year ago

Check this jsfiddle.net/DuE8K/2. Do you see the variables textarea and checkbox? They are referencing to the textarea and checkbox located in the current row.

Jim Over a year ago

Works like a charm!Is it too much to ask how could I make the coresponding row red besided the alert?

Minko Gechev Over a year ago

let us continue this discussion in chat

|

gongsun · Accepted Answer · 2018-04-21 04:39:30Z

2

use .filter(':has(:checkbox:checked)' ie:

$('#mytable tr').filter(':has(:checkbox:checked)').each(function() {
 $('#out').append(this.id);
});

edited Apr 21, 2018 at 4:39

gongsun

5541 gold badge7 silver badges18 bronze badges

answered Aug 20, 2013 at 9:55

suhailvs

21.9k15 gold badges104 silver badges104 bronze badges

Comments

Abel Lopes · Accepted Answer · 2018-01-03 19:51:21Z

1

The following code snippet enables/disables a button depending on whether at least one checkbox on the page has been checked.

$('input[type=checkbox]').change(function () {
    $('#test > tbody  tr').each(function () {
        if ($('input[type=checkbox]').is(':checked')) {
            $('#btnexcellSelect').removeAttr('disabled');
        } else {
            $('#btnexcellSelect').attr('disabled', 'disabled');
        }
        if ($(this).is(':checked')){
            console.log( $(this).attr('id'));
         }else{
             console.log($(this).attr('id'));
         }
     });
});

Here is demo in JSFiddle.

edited Jan 3, 2018 at 19:51

answered Jan 13, 2017 at 18:20

Abel Lopes

113 bronze badges

Collectives™ on Stack Overflow

Loop over html table and get checked checkboxes (JQuery)

3 Answers 3

7 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related