Check or Uncheck all in a group of checkbox in JavaScript

Checkbox checkall If we have a series or a group of check boxes then we can provide one button to check all the checkboxes at one go and another button to uncheck all the checked buttons by using client side JavaScript.

In general, having the "Check All" functionality can improve the user experience by reducing the effort required to perform repetitive actions involving multiple checkboxes.

Note that this is a client side JavaScript feature so JavaScript execution is to be enabled in the client browser.

Check all checkboxes or Un check all by using single or double buttons or checkbox in JavaScript


There are different ways to achieve this result;
  • Using two buttons
  • Using single button
  • Using one common checkbutton (Example: Inside our E-Mailbox )

Using two buttons


Demo of Checkbox with two buttons, One for check all and other for Uncheck all .
Here is the JavaScript function to be kept within the head tag

<SCRIPT LANGUAGE="JavaScript">
<!-- 	
<!-- Begin
function CheckAll(chk)
{
for (i = 0; i < chk.length; i++)
	chk[i].checked = true ;
}

function UnCheckAll(chk)
{
for (i = 0; i < chk.length; i++)
	chk[i].checked = false ;
}
//  End -->
</script>
This is the HTML code to be kept inside the body tag.

<form name="myform" action="checkboxes.asp" method="post">
<b>Scripts for Web design and programming</b><br>
<input type="checkbox" name="check_list" value="1">ASP<br>
<input type="checkbox" name="check_list" value="2">PHP<br>
<input type="checkbox" name="check_list" value="3">JavaScript<br>
<input type="checkbox" name="check_list" value="4">HTML<br>
<input type="checkbox" name="check_list" value="5">MySQL<br>

<input type="button" name="Check_All" value="Check All"
onClick="CheckAll(document.myform.check_list)">
<input type="button" name="Un_CheckAll" value="Uncheck All"
onClick="UnCheckAll(document.myform.check_list)">
Next : Single button and then by using single checkbox

Managing form with backed PHP script to receive data

After displaying a group of checkboxes having same name, we can send the data to back end scirpt ( PHP here ) for further processing. This is part of a form so other elements like text box , radio buttons etc can be added to the form.
<html>
<head>
<title>Checkbox in JavaScript</title>
</head>
<body>
<script>
function Check(){
chk=document.getElementsByName("my_check")[0]
chk2=document.getElementsByName('check_list[]')

if(chk.checked==true){
  for (i=0;i<chk2.length;i++)
    chk2[i].checked=true
}else{
  for (i=0;i<chk2.length;i++)
    chk2[i].checked=false
}

}


</script>
<form name=myform action=action_page.php
method=post >
<input type=checkbox name=check_list[] value=ASP>ASP<br>

<input type=checkbox name=check_list[] value=PHP>PHP<br>
<input type=checkbox name=check_list[] value=JavaScript>JavaScript<br>
<input type=checkbox name=check_list[] value=HTML>HTML<br>
<input type=checkbox name=check_list[] value=MySQL>MySQL<br>
<input type=checkbox name='my_check' value='yes' onClick=Check()>
<b>Check Control</b>
<Input type=submit value=Submit>
</form>
</body>
</html>
PHP script to receive array with selected options. Displaying the values of only checked check boxes.
<?php
$scripts=$_POST['check_list'];
echo "Scripts : ". print_r($scripts)." <br>";
echo "<a href=checkbox1.html>Back to form</a>";
$str='';
echo "<br>Following elements are checked <br>";
while (list ($key,$val) = @each ($scripts)) {
$str=$str. "$val,";
}
echo $str;
?>

Using JQuery

We can get similar result by using JQuery. The advantage less code as we will be using JQuery library. Read more on Jquery Checkbox.

Restricting user selections

We can ask the user to select from a group of checkboxes but we can add one limit to the number of selections by user. User can change the selection but can't exceed the limit.
Limiting number of Checkboxes user can select
JavaScript Checkbox Reference
Subscribe to our YouTube Channel here


Subscribe

* indicates required
Subscribe to plus2net

    plus2net.com







    Maria

    18-11-2010

    Thank you! This is exactly what I was looking for!
    Mawimus

    18-05-2011

    Thank you ! But, how you get values? you have only the last value by the last checkbox checked?? !!
    Michael

    07-08-2011

    Get values by chk[i].value and set values by chk[i].value = "value";
    Firdaous Nizami

    26-12-2011

    thanks for information, and can u understand/help me about check box while i am using it in struts framework. i.e, how can i fetch only selected items after submit of the page. please guide me if you can...
    Alexander

    05-01-2012

    Can I use something different than "name" attribute to identify the checkbox? For example id or class or stuff? As I need to have name attribute as php array. Email me please, would be really grateful.
    cadetcaptain

    25-01-2012

    Thank you! Nice 1!
    Jack

    24-02-2012

    Nice Tutorial!!!!
    Phiri

    02-06-2012

    Does this work without forms? What if I want to check checkboxs with the same name in a specific div tag?
    Dhanapal

    10-08-2012

    ya..........it`s works........... thank ypu
    tonbad

    11-08-2012

    many many thanks...
    ssol

    22-11-2012

    If you want to get all Checked values in form name should be name="check-list[]".
    minm

    22-08-2014

    Thank you it worked
    Adam

    06-10-2014

    I am also using the name field for a php array. It seems to work fine if you just set the id field on the checkbox to id="check_list" and leave your name field as-is.
    jjj

    03-02-2015

    Thank you so much...i was struggling alot to check all boxes whixh were in while loop ans displaying resultset but this solution is working for me.....
    happy coding:)
    Dileep Soni

    30-05-2015

    Thank you so much for nice Tutorial!!!!
    Dharmendra Kumar

    05-06-2015

    Hey, I want to check and uncheck all check boxes in gridview (asp.net) by button click.
    Pls someone help me....
    Thanks
    belajarhebat

    04-08-2015

    thanks for information. good job :) !!
    AAAA

    07-08-2015

    Thank you Very Nice Explanation...........
    sohel

    28-09-2015

    function UnCheckAll does not have ' { ' other than that nice explanation! Cheers!!!
    smo1234

    09-10-2015

    thanks , added now.

    Post your comments , suggestion , error , requirements etc here




    We use cookies to improve your browsing experience. . Learn more
    HTML MySQL PHP JavaScript ASP Photoshop Articles FORUM . Contact us
    ©2000-2024 plus2net.com All rights reserved worldwide Privacy Policy Disclaimer