Question

188

javascript select all checkboxes in a table

rated 0 times [ 195] [ 7] / answers: 1 / hits: 70362 / 13 Years ago, tue, august 30, 2011, 12:00:00

I want to make a page that has a table of various webpages with checkboxes next to each. I want the user to be able to select multiple sites then search the sites using a google bar. I have a table where each cell has a form filled with checkboxes. each cell has a checkall button that checks all the options in that cell. I would like to add a checkbox to select all the options on the page. (yes I could just leave this option out but I kind of want to know how to access all the boxes in the cells anyway so that I can search with google like I want.) here is basically what I have. Its the section inside checkPage function that needs help at this point

<html>

<head>

<script type=text/javascript>

    function checkAll(checkname, bx) {

        for (i = 0; i < checkname.length; i++){

            checkname[i].checked = bx.checked? true:false;

        }

    }

    function checkPage(bx){





        var bxs = document.getElementByTagName ( table ).getElementsByTagName ( link ); 



        for(i = 0; i < bxs.length; i++){

            bxs[i].checked = bx.checked? true:false;

        }

    }

</script>





</head>

<body>

<input type=checkbox name=pageCheck  value=yes onClick=checkPage(this)><b>Check Page</b>

<table border=1 name =table>



<tr>

    <td name =list00>

        <form name =list00>

            <input type=checkbox name=Check_ctr value=yes onClick=checkAll(document.list00.link, this)><b>Check All</b><dd>

            <input type=checkbox name=link value=something.com>something.com<dd>

            <input type=checkbox name=link value=something.com>something.com<dd>

        </form>

    </td>

    <td><form name =list01>

            <input type=checkbox name=Check_ctr value=yes onClick=checkAll(document.list01.link, this)><b>Check All</b><dd>

            <input type=checkbox name=link value=something.com>something.com<dd>

            <input type=checkbox name=link value=something.com>something.com<dd>      

        </form></td>

</tr>

<tr>

    <td><form name =list10>

            <input type=checkbox name=Check_ctr value=yes onClick=checkAll(document.list10.link, this)><b>Check All</b><dd>

            <input type=checkbox name=link value=something.com>something.com<dd>

            <input type=checkbox name=link value=something.com>something.com<dd>  

        </form></td>

    <td><form name =list11>

            <input type=checkbox name=Check_ctr value=yes onClick=checkAll(document.list11.link, this)><b>Check All</b><dd>

            <input type=checkbox name=link value=something.com>something.com<dd>

            <input type=checkbox name=link value=something.com>something.com<dd>  

        </form></td>

</tr>

</table>



</body>

</html>

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

dewayneh

Add To Favorites

Follow

Total Points: 538

Total Questions: 114

Total Answers: 97

Location: Liberia

Member since Fri, Oct 22, 2021

3 Years ago

dewayneh questions

1 react-datepicker doesn't setState to dd/MM/yy

Sat, Sep 4, 21, 00:00, 3 Years ago

1 Edit Row in Vuejs and Bootstrap Vue

Sun, Nov 1, 20, 00:00, 4 Years ago

1 How to configure redux with next js?

Wed, Sep 23, 20, 00:00, 4 Years ago

1 React validation on blur and on button click

Fri, Aug 7, 20, 00:00, 4 Years ago

1 Display Lat Lng Coordinates on click on Mapbox GL JS

Wed, Jul 29, 20, 00:00, 4 Years ago

View All

answered 13 Years ago marinal · Accepted Answer

function checkAll(bx) {

  var cbs = document.getElementsByTagName('input');

  for(var i=0; i < cbs.length; i++) {

    if(cbs[i].type == 'checkbox') {

      cbs[i].checked = bx.checked;

    }

  }

}

Have that function be called from the onclick attribute of your checkbox to check all

<input type=checkbox onclick=checkAll(this)>

Edit I misread your question a little, i see you have attempted it in your code. the getElementsByTagName has to be plural which you may have typo'd there and has to be a tag as specified by the answer above

Edit: Passing the master checkbox as a parameter would allow for toggling check/uncheck as suggested by vol7ron and has been modified in this answer appropriately.

The question asks for all checkboxes on the page so this would suffice.

However, providing control of which elements to look for checkboxes can be achieved in may ways, too many to go into detail but examples could be document.getElementById(id).getElementsByTagName if all checkboxes to be controlled are branched nodes from one element.
Otherwise, you can iterate through a further tag name retrieval / custom class name retrieval to name a few.