bootstrap toggle and if statements
<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>