I have a form with a list of checkboxs. I want to create a checkAll and UncheckAll boxes for better user experience. I tried a lot of code that I got from Internet, but none of them worked. Can you help me to take a look and tell me what is the problem. thanks

<script type="text/javascript">
  function checkAll(field)
  {
  for (i = 0; i < field.length; i++)
    field[i].checked = true ;
  }

  function uncheckAll(field)
  {
  for (i = 0; i < field.length; i++)
    field[i].checked = false ;
  }
</script>


<style type="text/css">
  #user_info {
    border-collapse:collapse;
  }

  #user_info td, #user_info th {
    width:100px;
    border:1px solid #CACACA;
    padding:5px;  
  }

  #checkbox{
    padding:20px 0 20px 250px;
  }
</style>

<p>Please choose all the users whose group_id you want to replace with that of the uploaded file</p>

<form id="groupImportForm" action="<?php echo url_for('group_utilization/importGroupMarching') ?>" method="POST">
<table id="user_info">
  <thead>
    <th>User ID</th>
    <th>Last Name</th>
    <th>First Name</th>
    <th>Date_Of_Birth</th>
    <th>Old Group_ID</th>
    <th>New Group_ID</th>
    <th>Update GroupID</th>
  </thead>
  <tbody>
    <?php foreach($userGroupData as $value): ?>
    <tr>
      <td><?php echo $value['user_id']; ?></td>
      <td><?php echo $value['last_name']; ?></td>
      <td><?php echo $value['first_name']; ?></td>
      <td><?php echo $value['date_of_birth']; ?></td>
      <td><?php echo $value['group_id_old']; ?></td>
      <td><?php echo !empty($value['group_id_new']) ? $value['group_id_new'] : ''; ?></td>
      <td><input type="checkbox" name="isReplaceGroupID[<?php echo $value['user_id']; ?>]" value="<?php echo $value['group_id_new']; ?>"></input></td>
    </tr>
    <?php endforeach; ?>
  </tbody>
</table>
  <div id="checkbox">
    <input type="button" name="CheckAll" value="Check All"
    onClick="checkAll(document.myform.list)">
    <input type="button" name="UnCheckAll" value="Uncheck All"
    onClick="uncheckAll(document.myform.list)">

  </div>
  <div><input type="submit" value="Continue" /></div>
</form>
<br/>
<br/>

I have a form with a list of checkboxs. I want to create a checkAll and UncheckAll boxes for better user experience. I tried a lot of code that I got from Internet, but none of them worked. Can you help me to take a look and tell me what is the problem. thanks

<script type="text/javascript">
  function checkAll(field)
  {
  for (i = 0; i < field.length; i++)
    field[i].checked = true ;
  }

  function uncheckAll(field)
  {
  for (i = 0; i < field.length; i++)
    field[i].checked = false ;
  }
</script>


<style type="text/css">
  #user_info {
    border-collapse:collapse;
  }

  #user_info td, #user_info th {
    width:100px;
    border:1px solid #CACACA;
    padding:5px;  
  }

  #checkbox{
    padding:20px 0 20px 250px;
  }
</style>

<p>Please choose all the users whose group_id you want to replace with that of the uploaded file</p>

<form id="groupImportForm" action="<?php echo url_for('group_utilization/importGroupMarching') ?>" method="POST">
<table id="user_info">
  <thead>
    <th>User ID</th>
    <th>Last Name</th>
    <th>First Name</th>
    <th>Date_Of_Birth</th>
    <th>Old Group_ID</th>
    <th>New Group_ID</th>
    <th>Update GroupID</th>
  </thead>
  <tbody>
    <?php foreach($userGroupData as $value): ?>
    <tr>
      <td><?php echo $value['user_id']; ?></td>
      <td><?php echo $value['last_name']; ?></td>
      <td><?php echo $value['first_name']; ?></td>
      <td><?php echo $value['date_of_birth']; ?></td>
      <td><?php echo $value['group_id_old']; ?></td>
      <td><?php echo !empty($value['group_id_new']) ? $value['group_id_new'] : ''; ?></td>
      <td><input type="checkbox" name="isReplaceGroupID[<?php echo $value['user_id']; ?>]" value="<?php echo $value['group_id_new']; ?>"></input></td>
    </tr>
    <?php endforeach; ?>
  </tbody>
</table>
  <div id="checkbox">
    <input type="button" name="CheckAll" value="Check All"
    onClick="checkAll(document.myform.list)">
    <input type="button" name="UnCheckAll" value="Uncheck All"
    onClick="uncheckAll(document.myform.list)">

  </div>
  <div><input type="submit" value="Continue" /></div>
</form>
<br/>
<br/>

• javascript
• jquery

• 1 His code in a jsFiddle. – Chad Commented Jan 4, 2012 at 16:47
• Thanks for put the code into jsFiddle. Anyone can help me to make it work. thanks – 庆峰 扈 Commented Jan 4, 2012 at 17:29
• @Chad: Your jsFiddle is incorrect, it says both functions are undefined when I click buttons. You should choose eg. "on wrap (head)" to get rid of that specific problem. But thanks. – Tadeck Commented Jan 4, 2012 at 17:42

6 Answers 6

Checking & unchecking all checkboxes is very simple in jQuery. It works like that:

var all_checkboxes = jQuery(':checkbox'); // choose & store all checkboxes
all_checkboxes.prop('checked', true); // check all of them
all_checkboxes.prop('checked', false); // uncheck all of them

Here is the demonstration: jsfiddle.net/53fbc/

I live on jQuery, so I grabbed some code from here to update your code without using jQuery: http://www.coderanch.com/t/120677/HTML-CSS-JavaScript/find-Checkboxes

Here's a working solution: http://jsfiddle.net/nvAtF/1/

Here's the same solution with jQuery: http://jsfiddle.net/nvAtF/2/

Here's the code block:

function toggleCheckboxes(flag) {    
    var form = document.getElementById('groupImportForm');
    var inputs = form.elements;
    if(!inputs){
        //console.log("no inputs found");
        return;
    }
    if(!inputs.length){
        //console.log("only one elements, forcing into an array");
        inputs = new Array(inputs);        
    }

    for (var i = 0; i < inputs.length; i++) {  
      //console.log("checking input");
      if (inputs[i].type == "checkbox") {  
        inputs[i].checked = flag;
      }  
    }  
}

Try this:

$('input:checkbox').attr('checked', true);

for check all

$('input:checkbox').attr('checked', false);

for unchek all

var form = document.getElementById('groupImportForm');
var inputs = form.elements;
var checkboxes = [];
for (var i = 0; i < inputs.length; i++) {
    if (inputs[i].type == 'checkbox') {
        inputs[i].checked =true;
    }
}

Javascript version of the example

Same thin using jQuery

$(".uncheckAll']").click(function() {
   $('.inputs').attr('checked','checked'); //add the atrribute checked
   // $('.inputs').removeAttr("checked");     //remove the attribute checked
});

Working example of jQuery

Javascript function to toggle (check/uncheck) all checkbox.

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

Here's an ES6 one-liner to uncheck all by classname:

document.querySelectorAll('.classname').forEach((e)=>e.checked=false);