how to get value of all checkbox in table using javascript?

Question

I have a table , I want to get value of some checkbox and push in string. Then I'm trying a function to get value , but it shows object Object, It`s not working.

  <table id="div_table" border="2px" >
            <tbody>
                <tr>
                <td><input  type="checkbox" value="ABC" /></td>
                <td>
<input  type="checkbox" value="123" />
<input  type="checkbox" value="456" />
<input  type="checkbox" value="789" />
</td>
                <td><input  type="checkbox" value="xyz2" />
		<input  type="checkbox" value="xyz1" />
</td>
                </tr>
	</tbody>
        </table>

I tried code java function

  function getvalue_func()
            {
                $('#div_table > tbody  > tr').each(function() 
                {
                    var str = '';
                    $(this).find('td').find("input:checked").each(function ()
                    {
                        for (var i = 0; i < $(this).length; i++)
                        {
                            str += $(this).val() + ',';
                        }
                        return alert(str);
                    });         
                });
            }

Example : I check some checkbox: ABC,123,456 and xyz2 . Result : ABC,123,456,xyz2

Arun P Johny · Accepted Answer · 2014-11-11 04:33:44Z

6

I think you want the function to return the string then

function getvalue_func() {
  return $('#div_table input:checked').map(function() {
    return this.value;
  }).get().join(', ');
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="div_table" border="2px">
  <tbody>
    <tr>
      <td>
        <input type="checkbox" value="ABC" />
      </td>
      <td>
        <input type="checkbox" value="123" />
        <input type="checkbox" value="456" />
        <input type="checkbox" value="789" />
      </td>
      <td>
        <input type="checkbox" value="xyz2" />
        <input type="checkbox" value="xyz1" />
      </td>
    </tr>
  </tbody>
</table>
<button onclick="alert(getvalue_func())">get</button>

you can use a simple selector #div_table input:checked to get all the checked checkboxes inside the #div_table element
Use .map() to create an array of those checked checkboxes, then use .join() to convert the array to a string

edited Nov 11, 2014 at 4:33

answered Nov 11, 2014 at 4:27

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

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

1 Comment

Scott Selby Over a year ago

how do you get that Run Code Snippet button? after actually looking figured that one out

Scott Selby · Accepted Answer · 2014-11-11 04:36:41Z

0

I was going to say something very similar:

var result = "";
$('#div_table input:checked').each(function(item){
    result += $(this).val();
});
return result;

you're mixing up a couple of different meathods of working through an array of jQuery elements

      $(this).find('td').find("input:checked").each(function ()
       {
          // you already call a .each() on the inputs
           for (var i = 0; i < $(this).length; i++)
           {
              // $(this).length is always 1 since you're in a .each() loop
               str += $(this).val() + ',';
            }
        return alert(str);
      });

notes:

`.find()` will search through all layers of children
 `.each()` already iterates through each item

edited Nov 11, 2014 at 4:36

answered Nov 11, 2014 at 4:30

Scott Selby

9,58012 gold badges63 silver badges97 bronze badges

Collectives™ on Stack Overflow

how to get value of all checkbox in table using javascript?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related