Tuesday 26 March 2013

Select All check boxes inside a div

Move image using Jquery Animation
Get random record in sql


In this demo we select all check boxes inside a div, for this we create two group of checkbox list inside two separate div and select all on single check box selection. On selection of single check box for both groups all the check boxes select and deselect. For this jquery is using.



<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default2.aspx.cs" Inherits="RepeterDynamicControls.Default2" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        function Group1All(obj) {
            $('#group1 input:checkbox').each(function () {
                document.getElementById(($(this).attr('id'))).checked = obj.checked;
            });
        }

        function Group2All(obj) {
            $('#group2 input:checkbox').each(function () {
                document.getElementById(($(this).attr('id'))).checked = obj.checked;
            });
        }
</script>
</head>
<body>
    <form id="form1" runat="server">
    <div style="width: 500px; padding-top: 50px;">
        <div>
            <span><asp:CheckBox ID="chkGroup1" runat="server" Text="Select All" onclick="Group1All(this);"/> </span>
            <div>
                <fieldset>
                    <legend>Group1</legend>
                    <div id="group1">
                        <asp:CheckBoxList ID="chkGroup1List" runat="server" RepeatDirection="Horizontal" RepeatColumns="2" Width="300px">
                            <asp:ListItem Text="Checkbox1" Value="1"></asp:ListItem>
                            <asp:ListItem Text="Checkbox2" Value="2"></asp:ListItem>
                            <asp:ListItem Text="Checkbox3" Value="3"></asp:ListItem>
                            <asp:ListItem Text="Checkbox4" Value="4"></asp:ListItem>
                        </asp:CheckBoxList>
                    </div>
                </fieldset>
            </div>
            <br /><br />
              <span><asp:CheckBox ID="chkGroup2" runat="server" Text="Select All" onclick="Group2All(this);"/> </span>
            <div>
                <fieldset>
                    <legend>Group2</legend>
                     <div id="group2">
                        <asp:CheckBoxList ID="chkGroup2List" runat="server" RepeatDirection="Horizontal" RepeatColumns="2" Width="300px">
                            <asp:ListItem Text="Checkbox1" Value="1"></asp:ListItem>
                            <asp:ListItem Text="Checkbox2" Value="2"></asp:ListItem>
                            <asp:ListItem Text="Checkbox3" Value="3"></asp:ListItem>
                            <asp:ListItem Text="Checkbox4" Value="4"></asp:ListItem>
                        </asp:CheckBoxList>
                    </div>
                </fieldset>
            </div>
           
        </div>
    </div>
    </form>
</body>
</html>

Here is the view of page

Here we bind data using repeater and inner repeater then we modify our code to bind div it from code behind and using Eval 


 <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
    <script type="text/javascript">

        function SelectAll(obj, module) {
            var rules = document.getElementById(($(module).attr('id')));

            $('#' + rules.getAttribute('id') + ' input:checkbox').each(function () {
                document.getElementById(($(this).attr('id'))).checked = obj.checked;
            });
        }

    </script>


 <asp:Repeater ID="rptModule" runat="server" OnItemDataBound="rptModule_ItemDataBound">
                        <ItemTemplate>
                            <div>
                                <asp:CheckBox ID="chkModule" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "DisplayName") %>' onclick='<%# String.Format("SelectAll(this,{0});", Eval("DisplayName").ToString().Replace(" ","")) %>' 
                                  />
                                <div id='<%# Eval("DisplayName").ToString().Replace(" ","") %>'>
                                    <asp:Repeater ID="rptRule" runat="server">
                                        <ItemTemplate>
                                            <div style="padding-left: 16px">
                                                <asp:HiddenField ID="hdnModuleOpsId" runat="server" Value='<%# DataBinder.Eval(Container.DataItem, "ModuleOps.ModuleOpsId") %>' />
                                                <asp:CheckBox ID="chkRule" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "Rule.RuleName") %>' />
                                            </div>
                                        </ItemTemplate>
                                    </asp:Repeater>
                                </div>
                            </div>
                        </ItemTemplate>
                    </asp:Repeater>

No comments:

Post a Comment