check and uncheck the checkbox in repeater control using javascript?

Question

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>

Refer this Link :wiki.asp.net/404.aspx?aspxerrorpath=/themes/fan/pages/page.aspx/… I got the Solution from this link.Thanks for your support — Prince Antony G
– Prince Antony G, Commented Jan 16, 2012 at 10:27

score 8 · Accepted Answer · 2012-01-13 09:48:36Z

8

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

edited Jan 13, 2012 at 9:48

answered Jan 12, 2012 at 9:23

user57508

Sign up to request clarification or add additional context in comments.

14 Comments

user57508 Over a year ago

@PrinceAntonyG exactly for this case I've added a comment in the same line: "you could use a class here either - depends on you having access to '<%= this.allCheckbox.ClientID %>'"

user57508 Over a year ago

@PrinceAntonyG therefore i would need the markup of your gridview (or whatever that is)

user57508 Over a year ago

@PrinceAntonyG argl ... please post your whole markup for <asp:GridView... so i can suggest an appropriate usage of a CssClass or ClientID

user57508 Over a year ago

@PrinceAntonyG i've enhanced my answer a bit, and provided a fully working example ...

user57508 Over a year ago

@PrinceAntonyG what does "not working" mean? any error, exception ...? if you follow the link for the example, do you get a fully working example? ('cause i do ...)

|

Community · Accepted Answer · 2017-05-23 12:34:31Z

3

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

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

edited May 23, 2017 at 12:34

CommunityBot

11 silver badge

answered Jan 12, 2012 at 17:47

Ram Mourya

2,5884 gold badges19 silver badges25 bronze badges

4 Comments

Prince Antony G Over a year ago

I have already done in gridview, i have 2506 rows in my gridview, so for binding the data it takes time, so for i use paging concept, then the performance is little bit increased. For the same paging concept i used in repeater control, the time to load the data in repeater is good than Gridview.So for only i use repeater control. I need to do check / uncheck in repeater control.If you know give idea please

user57508 Over a year ago

your solution isn't really sufficient when there are more inputs in an RepeaterItem

user57508 Over a year ago

@PrinceAntonyG I've already adapted my answer to your spec ...?

Ram Mourya Over a year ago

@Prince Antony G , i checked the same javascript for Repeater control and its working fine.

Prince Antony G · Accepted Answer · 2012-01-16 10:23:14Z

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>

This is the Solution for selecting all the checkbox in a page

Vasilis Kasapidis · Accepted Answer · 2015-01-11 16:33:13Z

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!

Esailija · Accepted Answer · 2012-06-28 14:07:44Z

<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.

Refer paging concept for gridview..c-sharpcorner.com/UploadFile/3d39b4/custom-paging-in-gridview

Collectives™ on Stack Overflow

check and uncheck the checkbox in repeater control using javascript?

5 Answers 5

14 Comments

4 Comments

1 Comment

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

14 Comments

4 Comments

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related