Search code examples
javascriptjqueryhtmlbuttonserver-side

click Server Side Button and Select/Deselect Chechboxes using JQuery

I'm having issues trigger the server side button, i want to do something similar to this but with a server side button and checkboxes. It currently isn't working and i can't figure out why?

$(function all() {
      $("<%= btnSelect.ClientID %>").click(function () {

        if (document.getElementById("<%= btnSelect.ClientID %>") == 'Select All') {
            $('.button input').prop('checked', true);
            document.getElementById("<%= btnChkboxSelect.ClientID %>").value = "Unselect All";
        } else {
            $('.button input').prop('checked', false);
            document.getElementById("<%= btnChkboxSelect.ClientID %>").value = "Select All";
        }
    });

});
<body>
  <div id="main">
    <div id="first">
     <asp:Button ID="btnSelect" runat="server" UseSubmitBehavior="false" Text="Select All" OnClientClick="all();" />
      <div class="button">
        <div>
          <asp:CheckBox ID="checbox1" runat="server" />
        </div>
        <div>
          <asp:CheckBox ID="checbox2" runat="server" />
        </div>
         <div>
          <asp:CheckBox ID="checbox3" runat="server" />
        </div>
      </div>
</body>

Solution

  • You are missing # as id selector for btnSelect in your code.

       $(function {
      $("#<%= btnSelect.ClientID %>").click(function () { 
         if($(this).text() == "Select All")
         {
           $('.button input:checkbox').prop('checked', true);
           $(this).text("Unselect All");
         }
         else
         {
           $('.button input:checkbox').prop('checked', false);
           $(this).text("Select All");
         }       
    });

});