How to Checked/Unchecked All check-boxes using Jquery

Jayesh 12:19:00
checked/unchecked checkbox using jquery

 In this article I am giving the solution and explain of how to checked/ unchecked all checkboxes using Jquery.
Explain
I have explained How to Checked /Unchecked All checkboxes using Jquery. How to remove underline of ASP.Net Link-button, Hyperlink and html anchor tag  ( Hyperlink).

you have one main checkbox and its name is”select all fruit”, and below that many checkboxes with different fruit names such as “Apple”,”Banana”, “Orange” etc.
  1. If you select main “select all fruit” checkbox then select all fruit checkboxes, and reverse if you unchecked “select all fruit” checkbox then unchecked all fruits checkboxes.
  2. If checked all fruits checkbox then automatically checked  main “select all fruit” checkbox and if you unchecked to any fruits checkbox then unchecked main “select all fruit” checkbox.
Code

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="CheckboxExamples.aspx.cs"
    Inherits="WebApplication1.CheckboxExamples" %>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>How to Check/Uncheck All checkboxes using Jquery</title>

    <script src="Scripts/jquery-1.12.4.min.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(function () {

            $("#chkMain").click(function () {
                if ($(this).prop("checked")) {
                    $(".chk").prop('checked', true);
                }
                else {
                    $(".chk").prop('checked', false);
                }
            });

            $(".chk").change(function () {
                if ($(".chk:checked").length == $(".chk").length) {
                    $("#chkMain").prop("checked", true);
                }
                else {
                    $("#chkMain").prop("checked", false);
                }
            });

        });

    </script>

 </head>
<body>
    <form id="form1" runat="server">
    <table style="font-family:Arial">
        <input type="checkbox" id="chkMain"/>Select All Food
        <br />
        <hr />
        <input type="checkbox" id="chkApple" class="chk"  />Apple
        <br />
        <input type="checkbox" id="chkBanana" class="chk"  />Banana
        <br />
        <input type="checkbox" id="chkOrange" class="chk"  />Orange
        <br />
        <input type="checkbox" id="chkgrapes" class="chk"  />Grapes
        <br />
        <input type="checkbox" id="chkWatermelon" class="chk"  />Watermelon
    </table>
    </form>
</body>
</html>


See checked and unchecked checkbox functionality above code output…




Thanks.
If this article is help you, then share this blog and its article and give your valuable comments…! J

Post a Comment

0 Comments