Click here to Skip to main content
15,889,335 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
I was developing a website ,

There was a features to insert employee data into database,

I think to make it efficiency ,
Its better for user ,can multiple data in one click


so i create a checkboxlist menu,


The problem is ,I want to create feature select/deselect all ,

When i Was checked the checkbox ,
all the checkbox list was selected,
but when i was unchecked one of checkbox list element,
i hope checkbox is unchecked,but it is not unchecked,

What I have tried:

this is my code ,


<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
    <h2><%: Title %>.</h2>
      <asp:DropDownList id="ddlshift" runat="server" AutoPostBack="true" Width="100%" class="chosen-select"></asp:DropDownList> 
      <asp:RequiredFieldValidator ID="RequiredFieldValidatorCuti" runat="server" ForeColor="Red" ErrorMessage="Reason tidak boleh kosong" ControlToValidate="ddlshift" ValidationGroup="grpTambah"></asp:RequiredFieldValidator>
      <asp:CheckBox runat="server" ID="cbSelectAll" onclick="CheckUncheckall(this)" Text="Select/Deselect All" CssClass="JchkAll" onchange="Selectall();"/>
  
    <asp:CheckBoxList runat="server" ID="checkbox2" OnSelectedIndexChanged="chklist_selected" OnLoad="chklist_selected" >
    </asp:CheckBoxList>
    <asp:Label runat="server" ID="label1"></asp:Label>
    
    <asp:Label runat="server" ID="label2"></asp:Label>

    <asp:Button ID="button1" runat="server" OnClick="test"  Text ="test"/>
    <script type="text/javascript">
    function Selectall() {
  if ($('.JchkAll').is(':checked')) {
      $('.checkbox2').attr('checked', 'true');
  }
  else if ($('.checkbox2').element.is(':unchecked')) {
      $('.JchkAll').attr('checked', 'false');
  }
  else {
      $('.checkbox2').removeAttr('checked', 'false');
        }
    }
    </script>
    <script  type="text/javascript">
         function CheckUncheckall(chk) {
            var chks = document.getElementById("<% = checkbox2.ClientID %>").getElementsByTagName("input");
        for (var i = 0; i < chks.length; i++) {
            if (chks[i].type == "checkbox") chks[i].checked = chk.checked;
        }
    }
    </script>
</asp:Content>



How i can solve this?
Posted
Updated 3-Jun-20 23:50pm

1 solution

Try this:
ASP.NET
<asp:CheckBox runat="server" ID="cbSelectAll" Text="Select/Deselect All" CssClass="JchkAll" />

<asp:CheckBoxList runat="server" ID="checkbox2" OnSelectedIndexChanged="chklist_selected" OnLoad="chklist_selected" />

<script>
$(function(){
    var cbSelectAll = '#<%= cbSelectAll.ClientID %>';
    var checkbox2 = '#<%= checkbox2.ClientID %>';
    
    // Update the state of the options when the "select all" checbox is ticked/unticked:
    $(document).on("click", cbSelectAll, function(){
        $(checkbox2).find("input:checkbox").prop("checked", this.checked);
    });
    
    // Update the state of the "select all" checkbox when an option is ticked/unticked:
    var toggleAllSelected = function(){
        var allSelected = $(checkbox2).find("input:checkbox:not(:checked)").length === 0;
        $(cbSelectAll).prop("checked", allSelected);
    };
    
    $(document).on("click", checkbox2 + " input:checkbox", toggleAllSelected);
    toggleAllSelected(); // Set the initial state of the "select all" checkbox
});
</script>
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900