Question

enter image description here

如何使用javascript检查和取消选中转发器控件中的复选框？在这里我无法单击复选框或在单次检查中取消选中该复选框。

我的代码是：

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

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

更新我的回答

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

工作示例available

Answer 2

访问此帖我发布了一种更简单的方法来检查和取消选中复选框。

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

Answer 3

最后我得到了输出：

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

对Andreas Niedermair的一点贡献回答。为了使用jQuery 1.9+（或者我已经检查过），将removeAttr('checked');替换为prop('checked',false);，将attr('checked', 'checked');替换为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>

我花了一些时间来解决它！

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>

这是我的要求的最终解决方案。这是我使用div，因为当您获取视图源时，转发器ID不会生成html页面。所以我从div中取了id并应用到javascript中。

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

5 个答案: