change Jquery Code for Radioexemple 1 & added Jquery Code for Radioexemple 2

examples/index.html

@@ -344,13 +344,15 @@ $('#disable-switch').bootstrapSwitch('setActive', false);  // true || false</pre
 &lt;script>
 $(document).ready(function() {
     $('.radio1').on('click', function () {
-        $(this).addClass('is-checked')
+        $(this).addClass('is-checked');
+            if($('div').not('.is-checked')) {
+                $('.radio1').bootstrapSwitch('toggleState');
+            }
             if($(this).bootstrapSwitch('isActive') == true) {
-                $('.radio1').not('.is-checked').bootstrapSwitch('toggleState');
+                $('.is-checked').bootstrapSwitch('toggleState');
+                $(this).removeClass('is-checked');
             }
-        $(this).removeClass('is-checked')
     });
-});
 &lt;/script></pre>
     </div>
 </div>
@@ -367,9 +369,9 @@ $(document).ready(function() {
                     <div style="width: 10%;float: left;">
                       <label class="control-label" for="option1">Option 1</label>
                     </div>
-                    <div class="controls radio2">
-                        <div id="option1" class="switch option1">
-                            <input id="radio1" type="radio" name="radio" value="option1" />
+                    <div class="controls">
+                        <div id="option1" class="switch radio2">
+                            <input id="radio1" type="radio" name="radio2" value="option1" checked="checked" />
                         </div>
                     </div>
                 </div>
@@ -377,9 +379,9 @@ $(document).ready(function() {
                     <div style="width: 10%;float: left;">
                       <label class="control-label" for="option2">Option 2</label>
                     </div>
-                    <div class="controls radio2">
-                        <div id="option2" class="switch option2">
-                            <input id="radio2" type="radio" name="radio" value="option2" />
+                    <div class="controls">
+                        <div id="option2" class="switch radio2">
+                            <input id="radio2" type="radio" name="radio2" value="option2" />
                         </div>
                     </div>
                 </div>
@@ -387,9 +389,9 @@ $(document).ready(function() {
                     <div style="width: 10%;float: left;">
                       <label class="control-label" for="option3">Option 3</label>
                     </div>
-                    <div class="controls radio2">
-                        <div id="option3" class="switch option3">
-                            <input id="radio3" type="radio" name="radio" value="option3" />
+                    <div class="controls">
+                        <div id="option3" class="switch radio2">
+                            <input id="radio3" type="radio" name="radio2" value="option3" />
                         </div>
                     </div>
                 </div>
@@ -405,7 +407,7 @@ $(document).ready(function() {
           &lt;/div>
             &lt;div class="controls radio2">
               &lt;div id="option1" class="switch option1">
-                &lt;input id="radio1" type="radio" name="radio" value="option1" />
+                &lt;input id="radio1" type="radio" name="radio2" value="option1" checked="checked" />
               &lt;/div>
             &lt;/div>
         &lt;/div>
@@ -415,7 +417,7 @@ $(document).ready(function() {
             &lt;/div>
             &lt;div class="controls radio2">
               &lt;div id="option2" class="switch option2">
-                &lt;input id="radio2" type="radio" name="radio" value="option2" />
+                &lt;input id="radio2" type="radio" name="radio2" value="option2" />
               &lt;/div>
             &lt;/div>
         &lt;/div>
@@ -425,11 +427,24 @@ $(document).ready(function() {
             &lt;/div>
             &lt;div class="controls radio2">
               &lt;div id="option3" class="switch option3">
-                &lt;input id="radio3" type="radio" name="radio" value="option3" />
+                &lt;input id="radio3" type="radio" name="radio2" value="option3" />
               &lt;/div>
             &lt;/div>
         &lt;/div>
-    &lt;/div></pre>
+    &lt;/div>
+&lt;script>
+$(document).ready(function() {
+    $('.radio2').on('click', function () {
+        $(this).addClass('is-checked');
+            if($('div').not('.is-checked')) {
+                $('.radio2').bootstrapSwitch('toggleState');
+            }
+            if($(this).bootstrapSwitch('isActive') == true) {
+                $('.is-checked').bootstrapSwitch('toggleState');
+                $(this).removeClass('is-checked');
+            }
+    });
+&lt;/script></pre>
     </div>
 </div>
 
@@ -589,11 +604,25 @@ $(document).ready(function() {
     });
 
     $('.radio1').on('click', function () {
-        $(this).addClass('is-checked')
+        $(this).addClass('is-checked');
+            if($('div').not('.is-checked')) {
+                $('.radio1').bootstrapSwitch('toggleState');
+            }
+            if($(this).bootstrapSwitch('isActive') == true) {
+                $('.is-checked').bootstrapSwitch('toggleState');
+                $(this).removeClass('is-checked');
+            }
+    });
+
+    $('.radio2').on('click', function () {
+        $(this).addClass('is-checked');
+            if($('div').not('.is-checked')) {
+                $('.radio2').bootstrapSwitch('toggleState');
+            }
             if($(this).bootstrapSwitch('isActive') == true) {
-                $('.radio1').not('.is-checked').bootstrapSwitch('toggleState');
+                $('.is-checked').bootstrapSwitch('toggleState');
+                $(this).removeClass('is-checked');
             }
-        $(this).removeClass('is-checked')
     });
 
 });