how to check the value of checkboxes in each row of table dynamically using javascript or jquery

Question

I have a table in which values are dynamically added from database as below:

    var row = table.insertRow(i);
i = i+1;
// Insert new cells (<td> elements) at the 1st and 2nd position of the new <tr> element:
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
var cell4 = row.insertCell(3);
var cell5 = row.insertCell(4);
var cell6 = row.insertCell(5);
var cell7 = row.insertCell(6);
var cell8 = row.insertCell(7);
var cell9 = row.insertCell(8);
var cell10 = row.insertCell(9);
var cell11 = row.insertCell(10);

// Add some text to the new cells:
cell1.innerHTML = '$name';
cell2.innerHTML = '$name2';
cell3.innerHTML = '$lastname';
cell4.innerHTML = '$lastname2';
cell5.innerHTML = '$mellicode';
cell6.innerHTML = '$estekhdamnum';
cell7.innerHTML = '$email';
cell8.innerHTML = '$username';
cell9.innerHTML = '$password';
cell10.innerHTML = '$id';
var checkbox = document.createElement('INPUT');
checkbox.type = 'checkbox';
checkbox.name = 'checkbox[]';
checkbox.value = 'i-1';
cell11.appendChild(checkbox);

I would like to add a button at the end of the table that when I click it, it checks all the check boxes, recognizes the row of the checkbox and do some query.

$('tr').click(function(){

}); 

and below is the button that when I click on it, I would like to do the query on checked check boxes.

<input type="submit" class="form-control" name = "karbar" value=""onclick="add_karbar()"/><br><br>

I shouldn't use 'tr' here I think but I don't know how to recognize the check boxes and see if it is checked or not and recognize the row of the checked checkbox.

thanks for your answer in advance.

Answer 1

Hope this is what you are looking for,

 $("#check").click(function() { var index = []; $("#table tbody input[type='checkbox']:checked").each(function(el) { index.push($(this).closest('tr').index()); }); console.log(index) }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table id="table"> <tbody> <tr> <td><input type="checkbox"></td> </tr> <tr> <td><input type="checkbox"></td> </tr> <tr> <td><input type="checkbox"></td> </tr> <tr> <td><input type="checkbox"></td> </tr> <tr> <td><input type="checkbox"></td> </tr> <tr> <td><input type="checkbox"></td> </tr> <tr> <td><input type="checkbox"></td> </tr> <tr> <td><input type="checkbox"></td> </tr> <tr> <td><input type="checkbox"></td> </tr> </tbody> </table> <input type="submit" id="check"> 

Answer 2

You could do something like this.

 // Click event on button $('#checker').click(function(){ // iterate through all checkboxes that are checked $("input[type=checkbox]:checked").each(function () { // debugging purposes only console.log($(this).val() + " is checked"); // Add your code here }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="checkbox" name="checkbox1" value="1" checked>1 <input type="checkbox" name="checkbox2" value="2" checked>2 <input type="checkbox" name="checkbox3" value="3" checked>3 <button id="checker">Check</button>