Javascript or Jquery to check and uncheck all checkbox

Question

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/>

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
– Tadeck, Commented Jan 4, 2012 at 17:42

Tadeck · Accepted Answer · 2012-01-04 17:36:32Z

7

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/

answered Jan 4, 2012 at 17:36

Tadeck

138k28 gold badges155 silver badges201 bronze badges

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

Comments

Perry Tew · Accepted Answer · 2012-01-04 17:08:02Z

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

user1100481 · Accepted Answer · 2012-01-04 16:50:13Z

2

Try this:

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

for check all

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

for unchek all

answered Jan 4, 2012 at 16:50

user1100481

929 bronze badges

4 Comments

Darcy Over a year ago

Should be using .prop instead of .attr if using jquery 1.6+ api.jquery.com/prop

庆峰扈 Over a year ago

Sorry, it doesn't work. Can you also include the HTML part. thanks

Jamund Ferguson Over a year ago

Isn't it input[type='checkbox']? Nevermind api.jquery.com/checkbox-selector says that :checkbox is equivalent to [type='checkbox']

nopuck4you Over a year ago

stackoverflow.com/questions/426258/… - Similar thread.

Sameera Thilakasiri · Accepted Answer · 2012-01-04 17:35:42Z

0

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

edited Jan 4, 2012 at 17:35

answered Jan 4, 2012 at 16:50

Sameera Thilakasiri

9,51810 gold badges54 silver badges87 bronze badges

3 Comments

庆峰扈 Over a year ago

Sorry, I tried your solution, but didn't work. Can you give me the whole solution including the HTML

Sameera Thilakasiri Over a year ago

Please can you bring your solution to Fiddle, then it could much helpful us to understand :)

庆峰扈 Over a year ago

It is in Fiddle. jsfiddle.net/BRJng. Can you help me to make it work. thanks

Andrew Barber · Accepted Answer · 2014-04-07 15:48:45Z

0

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

edited Apr 7, 2014 at 15:48

Andrew Barber

40.3k20 gold badges97 silver badges124 bronze badges

answered Oct 1, 2013 at 14:41

Prem Kumar Maurya

4774 silver badges11 bronze badges

Comments

jaywiz · Accepted Answer · 2017-05-06 00:11:50Z

0

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

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

answered May 6, 2017 at 0:11

jaywiz

765 bronze badges

Collectives™ on Stack Overflow

Javascript or Jquery to check and uncheck all checkbox

6 Answers 6

Comments

Comments

4 Comments

3 Comments

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

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

4 Comments

3 Comments

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

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related