How to fetch checkbox values from table in javascript?

Question

I have a table which has checkbox in each column and I want to get the 'name' attribute of checked checkbox. Below is the checkbox look like. Each checkbox has different name associated with row and column. Syntax of name attribute is [row_name-col_name] :

I tried like the below in a JS file:

var formid = jQuery(elem).attr('id');
var checkdvalue = [];
var j = 0;

jQuery('#ecf_table').find('tr').each(function() {
  var row = jQuery(this);
  if (row.find('input[type="checkbox"]').is(':checked')) {
    checkdvalue[j++] = jQuery(row.find('input[type="checkbox"]')).attr('name');
  }
  alert(checkdvalue);
});

I need an array which looks like A.4-2,A.4-3,A.6-2 for the above table. However I am getting A.4-1,A.6-1 only. Please help me to get desired value.

Answer 1

You don't have to loop through the entire table, you can just select all checked checkboxes on the page. If you wish to limit it to that table, use selector #ecf_table input[type="checkbox"]:checked instead.

 function calculate() { var arr = []; $('input[type="checkbox"]:checked').each(function () { arr.push($(this).attr('name')); }); console.log(arr); } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="checkbox" name="A.1"> <input type="checkbox" name="A.2"> <input type="checkbox" name="A.3"> <input type="checkbox" name="B.1"> <input type="checkbox" name="B.2"> <input type="checkbox" name="B.3"> <button onclick="calculate()">Click me</button> 

Answer 2

The issue with your code is that your selector finds a collection of checkboxes. You then call attr() on that collection, but that method will only look at the first element found, not all of them.

To make the logic work you could instead select all the checked boxes and use map() to build the array from them. Using that method, all your code could be reduced to this:

var checkedvalue = $('#ecf_table :checkbox:checked').map(function() {
  return this.name;
});

Answer 3

I did a small edit to your code. This should work fine.

 function TestMethod() { var checkdvalue = []; var j = 0; jQuery('#ecf_table').find('tr').each(function () { var row = jQuery(this); row.find('input[type="checkbox"]').each(function () { var checkbox = jQuery(this); if(checkbox.prop("checked") == true) { checkdvalue[j++] = checkbox.attr("id"); } }); }); alert(checkdvalue); } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form id="form1" runat="server"> <div> <table id="ecf_table"> <tr> <td colspan="6">Advanced Scrum Product Owner</td> </tr> <tr> <td>e-Competence Level</td> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> </tr> <tr> <td>A.4</td> <td><input type="checkbox" id="A.4-1"/></td> <td><input type="checkbox" id="A.4-2"/></td> <td><input type="checkbox" id="A.4-3"/></td> <td><input type="checkbox" id="A.4-4"/></td> <td><input type="checkbox" id="A.4-5"/></td> </tr> <tr> <td>A.6</td> <td><input type="checkbox" id="A.6-1"/></td> <td><input type="checkbox" id="A.6-2"/></td> <td><input type="checkbox" id="A.6-3"/></td> <td><input type="checkbox" id="A.6-4"/></td> <td><input type="checkbox" id="A.6-5"/></td> </tr> <tr> <td>B.1</td> <td><input type="checkbox" id="B.1-1"/></td> <td><input type="checkbox" id="B.1-2"/></td> <td><input type="checkbox" id="B.1-3"/></td> <td><input type="checkbox" id="B.1-4"/></td> <td><input type="checkbox" id="B.1-5"/></td> </tr> <tr> <td>B.3</td> <td><input type="checkbox" id="B.3-1"/></td> <td><input type="checkbox" id="B.3-2"/></td> <td><input type="checkbox" id="B.3-3"/></td> <td><input type="checkbox" id="B.3-4"/></td> <td><input type="checkbox" id="B.3-5"/></td> </tr> </table> <input type="button" onclick="TestMethod()" value="submit" /> </div> </form>