title: bootstrap toggle and if statements
body: <p>I am trying to create 3 toggles using bootstrap and I added some if statements, some of them worked but the rest are not working</p>
  
  <p>this is my complete code</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;html&gt;
    &lt;head&gt;
      &lt;title&gt;Bootstrap Form Helpers Basic Template&lt;/title&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
  
  &lt;link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"&gt;
  &lt;script src="//netdna.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;script src="//code.jquery.com/jquery-2.1.1.min.js"&gt;&lt;/script&gt;
  &lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"&gt;&lt;/script&gt;
  
  
    &lt;/head&gt;
    &lt;body&gt;
      &lt;h1&gt;Hello, world!&lt;/h1&gt;
  
  &lt;input id="toggle-email" checked type="checkbox" data-toggle="toggle" data-on="&lt;i class='glyphicon glyphicon-ok'&gt;&lt;/i&gt; Email On" data-off="&lt;i class='glyphicon glyphicon-remove'&gt;&lt;/i&gt; Email OFF" data-onstyle="success" data-offstyle="danger" data-width="150"&gt;
  
  
  &lt;input id="toggle-phone" type="checkbox" data-toggle="toggle" data-on="&lt;i class='glyphicon glyphicon-ok'&gt;&lt;/i&gt; Phone On" data-off="&lt;i class='glyphicon glyphicon-remove'&gt;&lt;/i&gt; Phone OFF" data-onstyle="success" data-offstyle="danger" data-width="150"&gt;
  
  &lt;br&gt;
  &lt;br&gt;
  
  &lt;input id="toggle-both" type="checkbox" data-toggle="toggle" data-on="&lt;i class='glyphicon glyphicon-ok'&gt;&lt;/i&gt; Email &amp; Phone On" data-off="&lt;i class='glyphicon glyphicon-remove'&gt;&lt;/i&gt; Email &amp; Phone OFF" data-onstyle="success" data-offstyle="danger" data-width="300"&gt;
  
  
  
  &lt;script&gt;
   
   
   
   $(function() {
    
    
    $("#toggle-email").on("change", function () {
     if (this.checked) {
      $('#toggle-phone').bootstrapToggle('off');
      $('#toggle-both').bootstrapToggle('off');
     }
     else{
      $('#toggle-phone').bootstrapToggle('on');
      $('#toggle-both').bootstrapToggle('off');
     }
    })
    
    $("#toggle-phone").on("change", function () {
     if (this.checked) {
      $('#toggle-email').bootstrapToggle('off');
      $('#toggle-both').bootstrapToggle('off');
     }
     else{
      $('#toggle-email').bootstrapToggle('on');
      $('#toggle-both').bootstrapToggle('off');
     }
    })
    
    $("#toggle-both").on("change", function () {
     if (this.checked) {
      $('#toggle-email').bootstrapToggle('on');
      $('#toggle-phone').bootstrapToggle('on');
     }
     else{
      $('#toggle-email').bootstrapToggle('on');
      $('#toggle-phone').bootstrapToggle('off');
      
     }
    })
    
    
    
    
   });
   
   
  &lt;/script&gt;
  
  
  
  &lt;link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet"&gt;
  &lt;script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"&gt;&lt;/script&gt;
  
    &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>the if statements are clear and easy to understand my point </p>
  
  <p>any suggestions?</p>
  
  <p>thank you</p>