Jquery select each checkbox's value when it's in a html table

Question

HTML CODE

<table id="tablechkbx">
    <tr>
        <td>CITY&nbsp;<input value="5" id="datacell" type="checkbox"></td>
        <td>DATE OF BIRTH&nbsp;<input value="7" id="datacell" type="checkbox"></td>
        <td>DESIGNATION&nbsp;<input value="10" id="datacell" type="checkbox"></td>
        <td>EMAIL&nbsp;<input value="1" id="datacell" type="checkbox"></td>
        <td>GENDER&nbsp;<input value="12" id="datacell" type="checkbox"></td>
        <td>INCOME LEVEL&nbsp;<input value="8" id="datacell" type="checkbox"></td>
        <td>INDUSTRY OF EMPLOY&nbsp;<input value="9" id="datacell" type="checkbox"></td>
    </tr>
    <tr>
        <td>KIDS&nbsp;<input value="13" id="datacell" type="checkbox"></td>
        <td>MARITAL STATUS&nbsp;<input value="11" id="datacell" type="checkbox"></td>
        <td>MOBILE NUMBER&nbsp;<input value="2" id="datacell" type="checkbox"></td>
        <td>NAME&nbsp;<input value="3" id="datacell" type="checkbox"></td>
        <td>NIC NUMBER&nbsp;<input value="6" id="datacell" type="checkbox"></td>
        <td>TELEPHONE NUMBER&nbsp;<input value="4" id="datacell" type="checkbox"></td>                
    </tr>
</table>

Jquery

<script>                     
       var tds;
       $(document).ready(function(){
                $('#btnselectall').on('click',function(){                  
                    $('#tablechkbx').find('tr').each(function(){
                        tds = $(this).find('td'); 
                        for(var k=0;k<tds.size();k++){
                            var data = tds[i];
                            console.log(data.next("#datacell").val());                           
                        }                        
                    });                    
                });
            });
 </script>

I was try to get the checkbox value from above code but it's show an error like TypeError: data.next is not a function. But it will print all td element when it's use as console.log(data);

Is there more html than this or are you selecting the wrong id? Your table has the id tablechkbx but your selector is '#tbcheckbox'. — rdubya
– rdubya, Commented Aug 21, 2016 at 19:26
Also, its invalid html to reuse ids, they should be unique on the page. So you should use class="datacell" instead of id="datacell" on your inputs — rdubya
– rdubya, Commented Aug 21, 2016 at 19:28
correct value is tbcheckbox. Its copy past error.Because html table is very huge then I made smaller version from actual table structure. — Elshan
– Elshan, Commented Aug 21, 2016 at 19:51

rdubya · Accepted Answer · 2016-08-21 19:41:39Z

1

Aside from the issues I mentioned in the comments, the reason you are getting TypeError: data.next is not a function is because when you use bracket notation and access a jQuery object like an array, it returns the DOM element at that position, not a jQuery object. If you change var data = tds[i]; to var data = tds.eq(i); you will get a jQuery object.

Another way to loop over them would be to use tds.each(callback) (docs).

An additional issue is that you would need to call data.children() instead of data.next() (assuming you've fixed data to be a jQuery object) since the input you are looking for is a child of the td not a sibling.

answered Aug 21, 2016 at 19:41

rdubya

2,9261 gold badge18 silver badges21 bronze badges

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

1 Comment

Elshan Over a year ago

And I used console.log(data.children().valueOf('input#datacell').val());

Collectives™ on Stack Overflow

Jquery select each checkbox's value when it's in a html table

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related