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.

checkdvalue[j++] = jQuery(row.find('input[type="checkbox"]')).attr('name'); returns the first checkbox in each iteration. you should collect all the checked checkboxes from that row — Dzak
– Dzak, Commented Nov 29, 2018 at 9:26
you can change a bit the answer here to get what you need: stackoverflow.com/questions/18331973/… — Dzak
– Dzak, Commented Nov 29, 2018 at 9:31

JLe · Accepted Answer · 2018-11-29 09:31:45Z

0

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>

answered Nov 29, 2018 at 9:31

JLe

2,9043 gold badges20 silver badges31 bronze badges

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

1 Comment

Rory McCrossan Over a year ago

If you're going to do this, why not just use map() to keep it simple?

Rory McCrossan · Accepted Answer · 2018-11-29 09:35:15Z

0

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;
});

answered Nov 29, 2018 at 9:35

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

Comments

Xavier · Accepted Answer · 2018-11-29 09:54:15Z

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>

Collectives™ on Stack Overflow

How to fetch checkbox values from table in javascript?

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related