How to check-uncheck all checkbox With jQuery
Tags: javascript, jquery, tutorial, howto
Published: 2023-02-10 05:59:55

<p class="paragraph"> Howdy Coders, </p><p class="paragraph"> In this post, we are going to see how to check-uncheck all checkboxes using jQuery. </p><p class="paragraph"> It becomes useful when you want to allow users to select or deselect all checkboxes at once by clicking one checkbox rather than selecting one by one checkbox Just like Amazon, Flipkart like size uses for its product filtering. </p><h2>Steps by step Guide to select/Deselect checkbox using jQuery:</h2><p class="paragraph"> If you are new to Jquery or want to learn some basic before starting this tutorial, I must recommend to please checkout&nbsp;<a href="https://www.tutscoder.com/learn-javascript-from-scratch">learn-javascript-from-scratch</a>&nbsp;and&nbsp;<a href="https://www.tutscoder.com/jquery-step-by-step-tutorial-for-beginners/">jquery-step-by-step-tutorial-for-beginners</a> </p><p class="paragraph"> So, here I am going to show how this can be done by using Jquery. It can become handy and I have also used it on many projects and it's working great for me. </p><p class="paragraph"> So let’s start. </p><p class="paragraph"> <b>STEP-1:</b> </p><p class="paragraph"> First of all, you have to add the jquery library to your page: </p><pre><code class="code-block">&lt;head&gt;
&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;/head&gt;</code></pre><p class="paragraph"> <b>STEP-2:</b> </p><p class="paragraph"> Create a Blank&nbsp;HTML&nbsp;file and put the following code: </p><pre><code class="code-block">&lt;body&gt;
&lt;div id="container"&gt;
    &lt;div id="body"&gt;
        &lt;div class="header" &gt;Check/Uncheck all checkbox with Jquery&lt;/div&gt;

            &lt;table class="bordered" &gt;
                &lt;tr&gt;
                    &lt;th width="10%"&gt;&lt;input type="checkbox" name="chk_all" class="chk_all"&gt;&lt;/th&gt;
                    &lt;th &gt;Select All Items&lt;/th&gt;
                &lt;/tr&gt;
                &lt;tr&gt;
                    &lt;td &gt;&lt;input type="checkbox" name="country_id" class="checkboxes" value="6" &gt;&lt;/td&gt;
                    &lt;td &gt; Item-1 &lt;/td&gt;
                &lt;/tr&gt;
                &lt;tr&gt;
                    &lt;td &gt;&lt;input type="checkbox" name="country_id" class="checkboxes" value="7" &gt;&lt;/td&gt;
                    &lt;td &gt; Item-2 &lt;/td&gt;
                &lt;/tr&gt;
                &lt;tr&gt;
                    &lt;td &gt;&lt;input type="checkbox" name="country_id" class="checkboxes" value="8" &gt;&lt;/td&gt;
                    &lt;td &gt; Item-3 &lt;/td&gt;
                &lt;/tr&gt;
                &lt;tr&gt;
                    &lt;td &gt;&lt;input type="checkbox" name="country_id" class="checkboxes" value="9" &gt;&lt;/td&gt;
                    &lt;td &gt; Item-4 &lt;/td&gt;
                &lt;/tr&gt;
                &lt;tr&gt;
                    &lt;td&gt;&lt;input type="checkbox" name="country_id" class="checkboxes" value="10" &gt;&lt;/td&gt;
                    &lt;td &gt; Item-5 &lt;/td&gt;
                &lt;/tr&gt;
                &lt;tr&gt;
                    &lt;td &gt;&lt;input type="checkbox" name="country_id" class="checkboxes" value="10" &gt;&lt;/td&gt;
                    &lt;td &gt; Item-6 &lt;/td&gt;
                &lt;/tr&gt;

            &lt;/table&gt;

    &lt;/div&gt;
&lt;/div&gt;
&lt;/body&gt;</code></pre><p class="paragraph"> <b>STEP-3:</b> </p><p class="paragraph"> After ending the HTML tag add some&nbsp;Javascript code&nbsp;including with script tag as follow: </p><pre><code class="code-block">&lt;script type="text/javascript"&gt;
    $(document).ready(function () {

        //To Check all checkbox
        $(".chk_all").click(function () {

            var checkAll = $(".chk_all").prop('checked');
            if (checkAll) {
                $(".checkboxes").prop("checked", true);
            } else {
                $(".checkboxes").prop("checked", false);
            }

        });

        // if all checkbox are selected, check the chk_all checkbox
        $(".checkboxes").click(function ()
        {
            if($(".checkboxes").length==$(".subscheked:checked").length)
            {
                $(".chk_all").attr("checked", "checked");
            }
            else
            {
                $(".chk_all").removeAttr("checked");
            }
        });

    });
&lt;/script&gt;</code></pre><p class="paragraph"> Now you are&nbsp;done.&nbsp;If you find any issue checkout the complete&nbsp;source code given below: </p><p class="paragraph"> <b>Complete&nbsp;source code:</b> </p><p class="paragraph"> <b>Index.html</b> </p><pre><code class="code-block">&lt;html&gt;
&lt;head&gt;
&lt;script type="text/javascript" src="jquery.js"&gt;&lt;/script&gt;
    &lt;link rel="stylesheet" href="style.css" type="text/css" /&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div id="container"&gt;
    &lt;div id="body"&gt;
        &lt;div class="header" &gt;Check/Uncheck all checkbox with Jquery&lt;/div&gt;

            &lt;table class="bordered" &gt;
                &lt;tr&gt;
                    &lt;th width="10%"&gt;&lt;input type="checkbox" name="chk_all" class="chk_all"&gt;&lt;/th&gt;
                    &lt;th &gt;Select All Items&lt;/th&gt;
                &lt;/tr&gt;

                &lt;tr&gt;
                    &lt;td &gt;&lt;input type="checkbox" name="country_id" class="checkboxes" value="6" &gt;&lt;/td&gt;
                    &lt;td &gt; Item-1 &lt;/td&gt;
                &lt;/tr&gt;
                &lt;tr&gt;
                    &lt;td &gt;&lt;input type="checkbox" name="country_id" class="checkboxes" value="7" &gt;&lt;/td&gt;
                    &lt;td &gt; Item-2 &lt;/td&gt;
                &lt;/tr&gt;
                &lt;tr&gt;
                    &lt;td &gt;&lt;input type="checkbox" name="country_id" class="checkboxes" value="8" &gt;&lt;/td&gt;
                    &lt;td &gt; Item-3 &lt;/td&gt;
                &lt;/tr&gt;
                &lt;tr&gt;
                    &lt;td &gt;&lt;input type="checkbox" name="country_id" class="checkboxes" value="9" &gt;&lt;/td&gt;
                    &lt;td &gt; Item-4 &lt;/td&gt;
                &lt;/tr&gt;
                &lt;tr&gt;
                    &lt;td&gt;&lt;input type="checkbox" name="country_id" class="checkboxes" value="10" &gt;&lt;/td&gt;
                    &lt;td &gt; Item-5 &lt;/td&gt;
                &lt;/tr&gt;
                &lt;tr&gt;
                    &lt;td &gt;&lt;input type="checkbox" name="country_id" class="checkboxes" value="10" &gt;&lt;/td&gt;
                    &lt;td &gt; Item-6 &lt;/td&gt;
                &lt;/tr&gt;

            &lt;/table&gt;

    &lt;/div&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
&lt;script type="text/javascript"&gt;
    $(document).ready(function () {

        //To Check all checkbox
        $(".chk_all").click(function () {

            var checkAll = $(".chk_all").prop('checked');
            if (checkAll) {
                $(".checkboxes").prop("checked", true);
            } else {
                $(".checkboxes").prop("checked", false);
            }

        });

        // if all checkbox are selected, check the chk_all checkbox
        $(".checkboxes").click(function ()
        {
            if($(".checkboxes").length==$(".subscheked:checked").length)
            {
                $(".chk_all").attr("checked", "checked");
            }
            else
            {
                $(".chk_all").removeAttr("checked");
            }
        });

    });
&lt;/script&gt;</code></pre><p class="paragraph"> <b>CSS:</b> </p><pre><code class="code-block">html, body {
   margin:0;
   padding:0;
   height:100%;
}
body {
	border: 0;
	color: #000;
}

#body{
	width: 500px;
    margin: 0 auto;
    max-width: 100%;
	padding:20px 0 70px 0;
	height: 100%;
}

#container {
   min-height:100%;
   position:relative;
}

.header{
    font-size: 25px;
    text-align: center;
    background-color: #d0dafd;
}
table {
    *border-collapse: collapse;
    border-spacing: 5px;
    width: 100%;
}

.bordered {
    border: solid darkgoldenrod 3px;
    box-shadow: 0 1px 1px darkgoldenrod;
}

.bordered td {
    padding: 10px;
    border-bottom: 2px solid #d0dafd;

}
.bordered th {
    padding: 10px;
    border-bottom: 2px solid darkgoldenrod;
    background-color: #eee;
    border-top: none;
    text-align:center;
}

.bordered tbody tr:nth-child(even) {
	background: #eeeeee;
	border:1px solid #000;

}
.bordered tbody tr:hover td {
	background: #d0dafd;
	color: #FF0000;
}
tr td {
    text-align: center;
}</code></pre><p class="paragraph"> <b>Conclusion:</b> </p><p class="paragraph"> Thanks for reading. </p><p class="paragraph"> Do let me know If you face any difficulties please feel free to comment below we love to help you. if you have any feedback suggestions then please inform us by commenting. </p><p class="paragraph"> Don’t forget to share this tutorial with your friends on&nbsp;<a href="https://www.facebook.com/TutsCoder">Facebook</a>&nbsp;and&nbsp;<a href="https://twitter.com/tutscoder">Twitter</a>. </p>