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 — 庆峰扈, Jan 04 '12 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, Jan 04 '12 at 17:42

score 7 · Answer 1 · answered Jan 04 '12 at 17:36

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/

score 5 · Accepted Answer · answered Jan 04 '12 at 17:08

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

score 2 · Answer 3 · answered Jan 04 '12 at 16:50

2

Try this:

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

for check all

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

for unchek all

answered Jan 04 '12 at 16:50

user1100481

92
9

Should be using `.prop` instead of `.attr` if using jquery 1.6+ http://api.jquery.com/prop/ – Darcy Jan 04 '12 at 16:53
Sorry, it doesn't work. Can you also include the HTML part. thanks – 庆峰扈 Jan 04 '12 at 17:05
Isn't it ```input[type='checkbox']```? **Nevermind** http://api.jquery.com/checkbox-selector/ says that ```:checkbox``` is equivalent to ```[type='checkbox']``` – Jamund Ferguson Jan 04 '12 at 17:11
http://stackoverflow.com/questions/426258/how-do-i-check-a-checkbox-with-jquery-or-javascript - Similar thread. – nopuck4you Jan 04 '12 at 17:31

score 0 · Answer 4 · edited Apr 07 '14 at 15:48

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 07 '14 at 15:48

Andrew Barber

39,603
20
94
123

answered Oct 01 '13 at 14:41

Prem Kumar Maurya

457
4
11

score 0 · Answer 5 · answered May 06 '17 at 00:11

0

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

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

answered May 06 '17 at 00:11

jaywiz

76
5

Sameera Thilakasiri · Answer 6 · 2012-01-04T17:35:42.140

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 04 '12 at 17:35

answered Jan 04 '12 at 16:50

Sameera Thilakasiri

9,452
10
51
86

Sorry, I tried your solution, but didn't work. Can you give me the whole solution including the HTML – 庆峰扈 Jan 04 '12 at 17:06
Please can you bring your solution to Fiddle, then it could much helpful us to understand :) – Sameera Thilakasiri Jan 04 '12 at 17:10
It is in Fiddle. http://jsfiddle.net/BRJng/. Can you help me to make it work. thanks – 庆峰扈 Jan 04 '12 at 17:33

Javascript or Jquery to check and uncheck all checkbox

6 Answers6

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

Linked

Related