We help IT Professionals succeed at work.

How to use Javascript to check all checkboxes in HTML table

f_o_o_k_y
f_o_o_k_y asked
on
Medium Priority
327 Views
Last Modified: 2012-08-14
Hello Experts,
I need your help on this problem.
I have many HTML tables on single web page (example of two is below).
<table id="t1" border="1">
      <tbody><tr>
        <th colspan="7">
         Table 1
        </th>
      </tr>
      <tr>
        <th>
          Number:
        </th>
        <th>
          <input id="c1" type="checkbox"> To check:  		 	 	 	 	
        </th>
      </tr>
  <tr>
    <td>
      1338
    </td>

    <td>
       <input name="wydaj[20]" value="1" type="checkbox">
       <input name="nr[20]" value="42875" type="hidden">
    </td>
    
  </tr><tr>
    <td>

      1345
    </td>
    <td>
       <input name="wydaj[21]" value="1" type="checkbox">
       <input name="nr[21]" value="42876" type="hidden">
    </td>
  
</tr>
</tbody>
</table>
    <br>
    <table id="t2" border="1">
      <tbody><tr>
        <th colspan="7">
          Table 2
        </th>
      </tr>

      <tr>
        <th>
          Number:
        </th>
        <th>
          <input id="c3" type="checkbox"> To check:  		 	 	 	 	
        </th>
    
      </tr>
  <tr>
    <td>
      1938
    </td>
    <td>
       <input name="wydaj[22]" value="1" type="checkbox">
       <input name="nr[22]" value="42862" type="hidden">

    </td>
  
  </tr><tr>
    <td>
      1939
    </td>

    <td>
       <input name="wydaj[23]" value="1" type="checkbox">
       <input name="nr[23]" value="42863" type="hidden">
    </td>
  
    
</tr>
</tbody></table>

Open in new window


I need to be able to check/uncheck all of the check-boxes in each of the tables after I click on check-box in the header.

How can I do this ? I'm a beginner in javascript.

Best Regards
FooKy
Comment
Watch Question

try out this one
<html>
  <head>
<title>Lovetomarry.com</title>

    <script language='JavaScript'>
      checked = false;
      function checkedAll () {
        if (checked == false){checked = true}else{checked = false}
	for (var i = 0; i < document.getElementById('myform').elements.length; i++) {
	  document.getElementById('myform').elements[i].checked = checked;
	}
      }
    </script>
  </head>
  <body>
    <form id="myform">
      
      <BR>Check all: <input type='checkbox' name='checkall' onclick='checkedAll();'>
	  <BR><input type="checkbox" name="foo"/>
      <BR><input type="checkbox" name="bar"/>
    </form>
  </body>
</html>

Open in new window

Multitechnician
CERTIFIED EXPERT
Distinguished Expert 2019
Commented:
Test page : http://jsfiddle.net/Frc2n/2/
    $(":checkbox","th").click(function() {
        $(this).closest("table").find("tr :checkbox").attr("checked", $(this).is(":checked"));
    });

Open in new window

this is with ur table try out.
please revert
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>www.lovetomarry.com</title>
</head>

<body>
    <form id="myform">

<table id="t1" border="1">
      <tbody><tr>
        <th colspan="7">
         Table 1
        </th>
      </tr>
      <tr>
        <th>
          Number:
        </th>
        <th>
          <input id="c1" type="checkbox" onclick="checkedAll('myform');"> To check:  		 	 	 	 	
        </th>
      </tr>
  <tr>
    <td>
      1338
    </td>

    <td>
       <input name="wydaj[20]" value="1" type="checkbox">
       <input name="nr[20]" value="42875" type="hidden">
    </td>
    
  </tr><tr>
    <td>

      1345
    </td>
    <td>
       <input name="wydaj[21]" value="1" type="checkbox">
       <input name="nr[21]" value="42876" type="hidden">
    </td>
  
</tr>
</tbody>
</table>
</form>
<form id="testform">
    <br>
    <table id="t2" border="1">
      <tbody><tr>
        <th colspan="7">
          Table 2
        </th>
      </tr>

      <tr>
        <th>
          Number:
        </th>
        <th>
          <input id="c3" type="checkbox" onclick="checkedAll('testform');"> To check:  		 	 	 	 	
        </th>
    
      </tr>
  <tr>
    <td>
      1938
    </td>
    <td>
       <input name="wydaj[22]" value="1" type="checkbox">
       <input name="nr[22]" value="42862" type="hidden">

    </td>
  
  </tr><tr>
    <td>
      1939
    </td>

    <td>
       <input name="wydaj[23]" value="1" type="checkbox">
       <input name="nr[23]" value="42863" type="hidden">
    </td>
  
    
</tr>
</tbody></table>
</form>
   <script language='JavaScript'>
      var checked =false;
      function checkedAll (myform) {
        if (checked == false){checked = true}else{checked = false}
	for (var i = 0; i < document.getElementById(myform).elements.length; i++) {
	  document.getElementById(myform).elements[i].checked = checked;
	}
      }
    </script>
</body>
</html>

Open in new window

Try below code..
one modification is you need to add a "class" attribute to the checkbox, whose value should be the id of the controlling checkbox.
 
<html>
	<head>
		<title>Test</title>
		<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
		<script type="text/javascript">
			function checkAll(t) {
				if(t.checked){
					$('.'+t.id).each(function(){
						this.checked=true;
					});
				} else {
					$('.'+t.id).each(function(){
						this.checked=false;
					});
				}
			}
		</script>
		<body>
		

<table id="t1" border="1">
      <tbody><tr>
        <th colspan="7">
         Table 1
        </th>
      </tr>
      <tr>
        <th>
          Number:
        </th>
        <th>
          <input id="c1" type="checkbox" onclick="javascript:checkAll(this);"> To check:                                             
        </th>
      </tr>
  <tr>
    <td>
      1338
    </td>

    <td>
       <input name="wydaj[20]" class="c1" value="1" type="checkbox">
       <input name="nr[20]" value="42875" type="hidden">
    </td>
    
  </tr><tr>
    <td>

      1345
    </td>
    <td>
       <input name="wydaj[21]" class="c1" value="1" type="checkbox">
       <input name="nr[21]" value="42876" type="hidden">
    </td>
  
</tr>
</tbody>
</table>
    <br>
    <table id="t2" border="1">
      <tbody><tr>
        <th colspan="7">
          Table 2
        </th>
      </tr>

      <tr>
        <th>
          Number:
        </th>
        <th>
          <input id="c3" type="checkbox" onclick="javascript:checkAll(this);"> To check:                                             
        </th>
    
      </tr>
  <tr>
    <td>
      1938
    </td>
    <td>
       <input name="wydaj[22]" class="c3" value="1" type="checkbox">
       <input name="nr[22]" value="42862" type="hidden">

    </td>
  
  </tr><tr>
    <td>
      1939
    </td>

    <td>
       <input name="wydaj[23]" class="c3" value="1" type="checkbox">
       <input name="nr[23]" value="42863" type="hidden">
    </td>
  
    
</tr>
</tbody></table>
</body>
	</head>
</html>

Open in new window


BR:Sudhi:www.clicksperday.com
CERTIFIED EXPERT

Author

Commented:
GREAT work, thank you!

Explore More ContentExplore courses, solutions, and other research materials related to this topic.