CODEWITHSUNDEEP
c#javascriptjqueryasp.netrepeater
Prince Antony G
Prince Antony G

Reputation: 932

check and uncheck the checkbox in repeater control using javascript?

enter image description here

how to check and uncheck the checkbox in repeater control using javascript? here i m unable to check the checkbox in single click or uncheck the checkbox in single check.

my code is:

 <asp:Repeater id="repeaterentry" runat="server"  >
<HeaderTemplate>
<table border="1" width="100%">
<tr>
<th style="width:10px" align="left"><asp:CheckBox ID="allCheckbox1"   runat="server" /></th>
<th><asp:LinkButton ID="lnkbtn1" runat="server" CommandName="UserName">Name</asp:LinkButton></th>
<th>Password</th>
</tr>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td style="width:10px"><asp:CheckBox ID="chkContainer" runat="server" /></td>
<td><%#Eval("uname") %> </td>
<td><%#Eval("upass")%> </td>
</tr>
</ItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:Repeater>

the jquery :

<script type="text/jscript" language="jscript">
window.onload = function () {
      var $allCheckbox = $('<%= this.repeaterentry.ClientID %>'); // you could use a class here either - depends on you having access to '<%= this.allCheckbox.ClientID %>'
$allCheckbox.change(function () {
    var $table = $allCheckbox.closest('table');
    var $checkboxes = $(':checkbox', $table).not($allCheckbox); // this selector is a bit evil, if you have other checkboxes in the table as well ...
    if ($allCheckbox.is(':checked')) {
        $checkboxes.attr('checked', 'checked');
    }
    else {
        $checkboxes.removeAttr('checked');
    }
});
        }
    }
</script>

Upvotes: 5

Views: 27573

Answers (5)

Vasilis Kasapidis
Vasilis Kasapidis

Reputation: 85

A small contribution to Andreas Niedermair answer. For this to work with jQuery 1.9+ (or so I have checked) replace the removeAttr('checked'); with prop('checked',false); and attr('checked', 'checked'); with prop('checked', 'checked');

<script type="text/javascript">
$(document).ready(function () {
    var $allCheckbox = $('.headeraction :checkbox');
    var $checkboxes = $('.itemaction :checkbox');
    $allCheckbox.change(function() {
        if ($allCheckbox.is(':checked')) {
            $checkboxes.prop('checked', 'checked');
        }
        else {
            $checkboxes.prop('checked',false);
        }
    });
    $checkboxes.change(function() {
        if ($checkboxes.not(':checked').length) {
            $allCheckbox.prop('checked', false);
        }
        else {
            $allCheckbox.prop('checked', 'checked');
        }      


     });
});
</script>

It took me some time to work it out!

Upvotes: 2

Prince Antony G
Prince Antony G

Reputation: 932

<script type="text/javascript">  
   var TotalChkBx;
    var Counter;

    var TotalUnChkBx;
    var UnCounter;
    window.onload = function()
    {
        //Get total no. of CheckBoxes in side the GridView.
        TotalChkBx = parseInt('<%= this.RepeaterEntryStatus.Items.Count %>');
        //Get total no. of checked CheckBoxes in side the GridView.
        Counter = 0;

    }
    function HeaderClick(CheckBox)
    {
        //Get target base & child control.
        var TargetBaseControl = document.getElementById('StatusBlock');
        var TargetChildControl = "chkContainer";

        //Get all the control of the type INPUT in the base control.
        var Inputs = TargetBaseControl.getElementsByTagName("input");

        //Checked/Unchecked all the checkBoxes in side the GridView.
        for(var n = 0; n < Inputs.length; ++n)
            if(Inputs[n].type == 'checkbox' && Inputs[n].id.indexOf(TargetChildControl,0) >= 0)
                 Inputs[n].checked = CheckBox.checked;
        //Reset Counter
        Counter = CheckBox.checked ? TotalChkBx : 0;
    }
    function ChildClick(CheckBox, HCheckBox)
    {
        //get target base & child control.
        var HeaderCheckBox = document.getElementById(HCheckBox);

        //Modifiy Counter;            
        if(CheckBox.checked && Counter < TotalChkBx)
            Counter++;
        else if(Counter > 0) 
            Counter--;

        //Change state of the header CheckBox.
        if(Counter < TotalChkBx)
            HeaderCheckBox.checked = false;
        else if(Counter == TotalChkBx)
            HeaderCheckBox.checked = true;
    }

</script>



<div id="StatusBlock">
    <asp:Repeater id="RepeaterEntryStatus" runat="server">
<HeaderTemplate>
    <table border="1" width="100%">
        <colgroup>
            <col style="width: 10px;" />
            <col />
            <col />
        </colgroup>
        <tr>
            <th align="left" class="allCheckbox">
                <asp:CheckBox ID="chkBxHeader" runat="server" onclick="javascript:HeaderClick(this);" />
            </th>
            <th>
                <asp:LinkButton ID="lnkbtn1" runat="server" CommandName="UserName">Name</asp:LinkButton>
            </th>
            <th>
                Password
            </th>
        </tr>
</HeaderTemplate>
<ItemTemplate>
    <tr>
        <td class="singleCheckbox">
            <asp:CheckBox ID="chkContainer" runat="server" />
        </td>
        <td>
            <%#Eval("uname") %>
        </td>
        <td>
            <%#Eval("upass")%>
        </td>
    </tr>
</ItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>

This is the Final Solution for My Requirement.Here i m using div because when you take the view source the repeater id is not generated html page. so for i taken the id from div and apply into the javascript.

Upvotes: 1

Prince Antony G
Prince Antony G

Reputation: 932

Finally I got the Output:

<script type="text/javascript">
// Let's use a lowercase function name to keep with JavaScript conventions
function selectAll(invoker) {
    // Since ASP.NET checkboxes are really HTML input elements
    //  let's get all the inputs 
    var inputElements = document.getElementsByTagName('input');

    for (var i = 0; i < inputElements.length; i++) {
        var myElement = inputElements[i];

        // Filter through the input types looking for checkboxes
        if (myElement.type === "checkbox") {

            // Use the invoker (our calling element) as the reference 
            //  for our checkbox status
            myElement.checked = invoker.checked;
        }
    }
} 


<asp:Repeater id="repeaterentry" runat="server">
<HeaderTemplate>
    <table border="1" width="100%">
        <colgroup>
            <col style="width: 10px;" />
            <col />
            <col />
        </colgroup>
        <tr>
            <th align="left" class="allCheckbox">
               <asp:CheckBox ID="cbSelectAll" runat="server" Text="Select All" OnClick="selectAll(this)" />
            </th>
            <th>Name</th>
            <th>
                Password
            </th>
        </tr>
</HeaderTemplate>
<ItemTemplate>
    <tr>
        <td class="singleCheckbox">
            <asp:CheckBox ID="chkContainer" runat="server" />
        </td>
        <td>
            <%#Eval("uname") %>
        </td>
        <td>
            <%#Eval("upass")%>
        </td>
    </tr>
</ItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>

Upvotes: 2

user57508
user57508

Reputation:

updating my answer to

<asp:Repeater id="repeaterentry" runat="server">
    <HeaderTemplate>
        <table border="1" width="100%">
            <colgroup>
                <col style="width: 10px;" />
                <col />
                <col />
            </colgroup>
            <tr>
                <th align="left" class="allCheckbox">
                    <asp:CheckBox ID="allCheckbox1" runat="server" />
                </th>
                <th>
                    <asp:LinkButton ID="lnkbtn1" runat="server" CommandName="UserName">Name</asp:LinkButton>
                </th>
                <th>
                    Password
                </th>
            </tr>
    </HeaderTemplate>
    <ItemTemplate>
        <tr>
            <td class="singleCheckbox">
                <asp:CheckBox ID="chkContainer" runat="server" />
            </td>
            <td>
                <%#Eval("uname") %>
            </td>
            <td>
                <%#Eval("upass")%>
            </td>
        </tr>
    </ItemTemplate>
    <FooterTemplate>
    </table>
    </FooterTemplate>
</asp:Repeater>

<script type="text/javascript">
    $(function () {
        var $allCheckbox = $('.allCheckbox :checkbox');
        var $checkboxes = $('.singleCheckbox :checkbox');
        $allCheckbox.change(function () {
            if ($allCheckbox.is(':checked')) {
                $checkboxes.attr('checked', 'checked');
            }
            else {
                $checkboxes.removeAttr('checked');
            }
        });
        $checkboxes.change(function() {
            if ($checkboxes.not(':checked').length) {
                $allCheckbox.removeAttr('checked');
            }
            else {
                $allCheckbox.attr('checked', 'checked');
            }
        });
    });
</script>

working example available

Upvotes: 8

Ram Mourya
Ram Mourya

Reputation: 2548

Visit this i have posted an easier method to check and uncheck the checkboxes.

https://stackoverflow.com/a/8779907/1054978

Upvotes: 3

Related Questions