Print values associated with checkboxes in HTML on button click event of JavaScript

Question

Planning to get the specific ID values from the selection on the HTML page (selection here means checked boxes). Here is my code for a button click event(button will fetch the row numbers or ids):

$("a", button).click(function () {
            $('#groups').find('tr').each(function () {
                 var row = $(this);
                 if (row.find('input[type="checkbox"]').is(':checked')) {
                    console.log($(this));
            }
        });
});

This returns addtional information on rows + tr tag, however, I just want the ID part of it. Here is sample output I am getting out of above code:

[tr#row-12150.row.oddSelected, context: tr#row-12150.row.oddSelected]
[tr#row-12151.row.evenSelected, context: tr#row-12151.row.evenSelected]

This means I have selected 12150 and 12151 out of the #groups table. How do I just pull the row numbers 12150 and 12151 and not the entire detailed output and I want this to store in an array/(JS array) for multiple row numbers.

JanR · Accepted Answer · 2016-03-08 01:07:29Z

1

You have the row as per the .find('tr'), your should just be able to go:

console.log($(this).attr('id')); //this should show the id in your console.

so your code becomes:

$("a", button).click(function () {
            $('#groups').find('tr').each(function () {
                 var row = $(this);
                 if (row.find('input[type="checkbox"]').is(':checked')) {
                   console.log($(this).attr('id'));
            }
        });
});

Then to just get the number you can use:

var number = $(this).attr(id).split('-')[1] //assuming it's always row-<<some number>>

putting it all together:

 $("a", button).click(function () {
                $('#groups').find('tr').each(function () {
                     var row = $(this);
                     if (row.find('input[type="checkbox"]').is(':checked')) {
                       var number = $(this).attr('id').split('-')[1] //assuming it's always row-<<some number>>;
                       console.log(number);
                }
            });
    });

To store it in an array:

$("a", button).click(function () {
                    var checkedRows = []; //define empty array.
                    var count = 0; //keep a counter to use for the array.
                    $('#groups').find('tr').each(function () {
                         var row = $(this);
                         if (row.find('input[type="checkbox"]').is(':checked')) {
                           var number = $(this).attr('id').split('-')[1];
                           checkedRows[count] = number; //add the number to our array.
                           count++; //increase the count
                    }
                });
        });

edited Mar 8, 2016 at 1:07

answered Mar 8, 2016 at 0:53

JanR

6,1303 gold badges25 silver badges30 bronze badges

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

3 Comments

Pratik Jaiswal Over a year ago

@JanR Awesome, I was about the post the same questions, thanks for updating the answer. How do I store the entire result in an array? I want to throw that array via a AJAX call and so, I need to think beyond just printing on the console

JanR Over a year ago

updated for array, once in the array you could do an ajax call after the loop to send it to an api

Pratik Jaiswal Over a year ago

One more thing to add to it, in the updated answer "var number = ...." line misses quotes around "id". Other words, id should be in single quote ...just in case if someone else wants to refer this...if that can be updated?

StackSlave · Accepted Answer · 2016-03-08 01:08:15Z

0

Make sure your form and your button have id's first then try this instead:

$('#buttonId').click(function(){
  $('#formId input:checked').each(i, e){
    console.log($(e).attr('id'));
  }
});

answered Mar 8, 2016 at 1:08

StackSlave

10.6k2 gold badges20 silver badges35 bronze badges

Collectives™ on Stack Overflow

Print values associated with checkboxes in HTML on button click event of JavaScript

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related