title: Asp radio buttons using bootstrap 3 to make them appear as toggle buttons
body: <p>I have 4 asp radio buttons that I want to appear like toggle buttons, but still function as asp radio buttons. Mainly, I need the CheckedChanged event to fire when the button is clicked. Currently, this is what I have for the HTML:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/&gt;   
  &lt;div class="col-xs-10 btn-group colors" data-toggle="buttons"&gt;
      &lt;div class="row"&gt;
          &lt;div id="tbl_rdo_ach" runat="server" class="col-xs-2"&gt;
              
              &lt;label class="btn btn-primary"&gt;
                  ACH/E-Check
                  &lt;asp:RadioButton ID="rdo_ach" runat="server" Font-Bold="True" GroupName="rdo_pay_type"
                          AutoPostBack="True" Text="ACH/E-Check" CssClass="radioButton"&gt;&lt;/asp:RadioButton&gt;
              &lt;/label&gt;
          &lt;/div&gt;
          &lt;div id="tbl_rdo_cc" runat="server" class="col-xs-2"&gt;
              &lt;label class="btn btn-primary"&gt;
                  Debit/Credit Card
                  &lt;asp:RadioButton ID="rdo_cc" runat="server" Font-Bold="True" GroupName="rdo_pay_type"
                      AutoPostBack="True" Text="Debit/Credit Card" CssClass="radioButton"&gt;&lt;/asp:RadioButton&gt;
              &lt;/label&gt;
          &lt;/div&gt;
          &lt;div id="tbl_rdo_ck" runat="server" class="col-xs-2"&gt;                
              &lt;label class="btn btn-primary"&gt;
                  Check
                  &lt;asp:RadioButton ID="rdo_ck" runat="server" Font-Bold="True" GroupName="rdo_pay_type"
                          AutoPostBack="True" Text="Check"&gt;&lt;/asp:RadioButton&gt;
              &lt;/label&gt;
           &lt;/div&gt;
           &lt;div id="tbl_rdo_et" runat="server" class="col-xs-2"&gt;
              &lt;label class="btn btn-primary"&gt;
                  EFT
                  &lt;asp:RadioButton ID="rdo_et" Font-Bold="True" GroupName="rdo_pay_type" AutoPostBack="True"
                      Text="EFT Deposit" runat="server"&gt;&lt;/asp:RadioButton&gt;
              &lt;/label&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The radioButton CSS class:</p>
  
  <pre><code>&lt;style type="text/css"&gt;
      .radioButton {
          display:none;
      }
  &lt;/style&gt;
  </code></pre>
  
  <p>The issue I am currently having is when I do not have the radioButton css class on the asp:RadioButtons, the radio button shows through the button group and you have to click specifically within the radio to get the CheckedChanged event to fire. When I do have the class on the radio buttons, the radio button does not display through the button group, but when I click the button, the CheckedChanged event won't fire at all.</p>
  
  <p>I also attempted using asp:Button instead of asp:RadioButton and then setting the necessary checked property so that the code behind runs properly, but due to the update panel on the master page, I can't get a full postback to run. </p>
  
  <p>Is there any way to get a button group to display, but have a full postback run when one of the buttons is clicked? </p>