使用javascript检查并取消选中转发器控件中的复选框？

Question

how to check and uncheck the checkbox in repeater control using javascript? here im 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>

Answer 1

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

Answer 2

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

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

Answer 3

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!

Answer 4

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>

Answer 5

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