Check or uncheck checkbox in JavaScript

Today, we will learn how to check or uncheck checkbox in JavaScript. We will show all selected checkboxes using PHP as well.

When you have a list of data, sometimes, you want to easily check all or uncheck all of them. And then process those selected/checked data by getting their values first.

Today we’re going to do something like what we’re using in GMail or YahooMail.

  1. Check or Uncheck All Checkboxes in a form (using jQuery).
  2. Get the selected checkboxes values when the form is submitted (using PHP).
Check or Uncheck Checkboxes with jQuery And Get Selected with PHP

In case you want instant testing you may download the code or see the result in live demo:

Step 1: Create index.html and put the following code. The code below will show an HTML form with checkbox options.

        <title>Check and Uncheck All</title>
<div style='margin: 10px'><input type='checkbox' id='checker' />Check/Uncheck All</div>
<form action='index.php' method='post'>
<div style='margin: 10px'>
    <input type='checkbox' name='emotions[]' class='checkboxes' value='Happy' />Happy
    <input type='checkbox' name='emotions[]' class='checkboxes' value='Sad' />Sad
    <input type='checkbox' name='emotions[]' class='checkboxes' value='Excited' />Excited
    <input type='checkbox' name='emotions[]' class='checkboxes' value='Scared' />Scared
<div style='margin: 10px'>
    <input type='hidden' name='action' value='get_values' />
    <input type='submit' value='Submit Selected' />
<div style='margin: 10px'>
// PHP code will be here
<!-- jQuery script will be here -->

Step 2: Replace “PHP code will be here” line above with the following code. The code below will show you the selected checkbox options when the form was submitted.

//Defining indexes
empty($_POST['action']) ? $action = '' : $action = $_POST['action'];
empty($_POST['emotions']) ? $emotions = '' : $emotions = $_POST['emotions'];
if( $action == 'get_values'){
    if(!empty($emotions)){ //check if user ticked any checkbox
        foreach($emotions as $keys => $values){
            echo "<div>$values</div>";
        echo "Please select emotions.";

Step 3: Replace “jQuery script will be here” line above with the following code. The code below will check or un-check the checkbox options in the form.

<script type='text/javascript' src='js/jquery-1.6.1.min.js'></script>
<script type='text/javascript'>
    $(document).ready(function() {
        $( '#checker' ).click(function(){
            $( '.checkboxes' ).attr( 'checked', $( this ).is( ':checked' ) );

Download Source Code

You can download all the code used in this tutorial for only $9.99 $5.55!

Related Tutorials

We listed all our high quality full-stack web development tutorials here: Click here.

Thank you for learning from our post about: Check or Uncheck Checkboxes with jQuery And Get Selected with PHP.

By Mike Dalisay

I'm Mike Dalisay, a pro web developer since 2010. I love web development. Improving our tutorials and source codes makes me happy. Do you want to suggest an edit to our tutorial? Got something to ask about our source codes? You may use our comments section below or email our team at [email protected]


  1. Thanks for your comment. I appreciate it. I’m learning. But I hope you understand it by the live demo and code. You may also suggest in your comment how I can improve writing this. :)

Leave a comment

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Back to top