Thursday, 20 March 2014

jquery how to check a checkbox

Many time we need to peform the operation of select all check box while clicking some button or in some behavior and some for de-selecting all the check box,
It became very easy by just simple two lines in Jquery; selecting and de-selecting check box;
You just need to take the reference of Jquery js file into your application or page;
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
@Code to make the checkbox checked in JQuery;
<script type="text/javascript">
    //Check box checked
        $(document).ready(function () {
            $("#Button1").click(function () {
                $('#idChecked').attr('checked', true);
                // $("#Button1")[0].disabled = true;
            });
            //Check box unchecked
            $("#Button2").click(function () {
                $('#idChecked').attr('checked', false);
                // $("#Button1")[0].disabled = true;
            });
        });
    </script>
@Html code for button;
<asp:CheckBox ID="idChecked" runat="server" Text="Checked" />
                    <br />
                    <asp:Button ID="Button1" runat="server" Text="Checked" />
                    <asp:Button ID="Button2" runat="server" Text="Un Checked" />
@complete code;
<body>
    <form id="form1" runat="server">
    <div>
        <table width="60%" align="center">
            <tr>
                <td colspan="2" align="center">
                    <h1>
                         Check box test
</h1>
                </td>
            </tr>
            <tr>
                <td align="right">
                </td>
                <td align="left">
                  
                    <asp:CheckBox ID="idChecked" runat="server" Text="Checked" />
                    <br />
                    <asp:Button ID="Button1" runat="server" Text="Checked" />
                    <asp:Button ID="Button2" runat="server" Text="Un Checked" />
                </td>
            </tr>
        </table>
    </div>
    </form>
</body>
@output screen to checked check box in jquery
On unchecked
On checked

No comments:

Post a Comment