{"id":1524,"date":"2016-05-11T07:42:17","date_gmt":"2016-05-11T07:42:17","guid":{"rendered":"http:\/\/www.jquery-az.com\/?p=1524"},"modified":"2024-01-20T13:23:27","modified_gmt":"2024-01-20T13:23:27","slug":"checkbox-and-radio-button-as-bootstrap-switches-7-demos","status":"publish","type":"post","link":"https:\/\/www.jquery-az.com\/checkbox-and-radio-button-as-bootstrap-switches-7-demos\/","title":{"rendered":"7 Demos of Bootstrap Toggle\/Switch by Checkbox and Radio button"},"content":{"rendered":"<h3><strong>The Bootstrap toggle switches by using checkbox and radio button<\/strong><\/h3>\n<p>In this tutorial, I am going to show you a plug-in that can be used for creating nice-looking switches by turning radio buttons or <a href=\"\/bootstrap-checkbox-5-styles-with-demos-online\/\">checkboxes<\/a> that use the Bootstrap framework.<\/p>\n<p>It requires you to add a few dependency files that include Bootstrap CSS and JS files, jQuery library, and plug-in JS and CSS files.<\/p>\n<p>If your project is already based on the Bootstrap framework then web pages would not be heavy-weight as such plug-in files are small in size, especially if you use minified versions.<\/p>\n<h3><strong>A demo of simple On \/ Off switch<\/strong><\/h3>\n<p>In this demo, a checkbox is created that acts as a toggle switch. The default value is checked so the\u00a0switch is On initially. See a demo online followed by some details to set up:<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter wp-image-1525 size-full\" src=\"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2016\/05\/34.0_1-Bootstrap-switch.jpg\" alt=\"Bootstrap toggle switch\" width=\"284\" height=\"130\" \/><\/p>\n<h6><a href=\"\/boots\/demo.php?ex=34.0_1\" target=\"_blank\" rel=\"noopener nofollow\"><strong>See online demo and code<\/strong><\/a><\/h6>\n<p>In the demo, you can see four buttons to Set the true\/false state of the switch or checkbox. The toggle button will reverse the current mode. While the Get button returns the current value of the checkbox. If checked, it will return true, otherwise, false.<\/p>\n<p>Follow these steps to set up this switch\/toggle plug-in for your web page:<\/p>\n<p><strong>Step 1: <\/strong><\/p>\n<p>Include the Bootstrap and bootstrap-switch CSS files in the &lt;head&gt; section:<\/p>\n<div class=\"codesdiv1\">\n<p>&lt;link rel=&#8221;stylesheet&#8221; href=&#8221;http:\/\/netdna.bootstrapcdn.com\/bootstrap\/3.3.4\/css\/bootstrap.min.css&#8221;&gt;<\/p>\n<p>&lt;link href=&#8221;css\/bootstrap-switch\/bootstrap-switch.css&#8221; rel=&#8221;stylesheet&#8221;&gt;<\/p>\n<\/div>\n<p>(Place it at your desired location, if not referring from the CDN)<\/p>\n<p><strong>Step 2: <\/strong><\/p>\n<p>Place the jQuery library, <em>highlight.js<\/em>,<em> bootstrap-switch.js and main.js<\/em> files just above the &lt;\/body&gt; tag.<\/p>\n<p>You may get all these files by downloading the package from the plug-in page from GitHub website (credit: <a href=\"https:\/\/github.com\/nostalgiaz\/bootstrap-switch\" target=\"_blank\" rel=\"nofollow\">Mattia Larentis<\/a>)<\/p>\n<p><strong>Step 3:<\/strong><\/p>\n<p>The markup section where a checkbox is created with an id:<\/p>\n<blockquote><p>&lt;input id=&#8221;switch-state&#8221; type=&#8221;checkbox&#8221; checked&gt;<\/p><\/blockquote>\n<p>All four buttons are assigned related data attributes for performing a\u00a0certain action.<\/p>\n<p><strong>Complete code for this example:<\/strong><\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n&lt;head&gt;\r\n\r\n&lt;link rel=\"stylesheet\" href=\"https:\/\/netdna.bootstrapcdn.com\/bootstrap\/3.3.4\/css\/bootstrap.min.css\"&gt;\r\n    &lt;link href=\"css\/bootstrap-switch\/bootstrap-switch.css\" rel=\"stylesheet\"&gt;\r\n&lt;\/head&gt;\r\n\r\n&lt;body&gt;\r\n\r\n    &lt;main id=\"content\" role=\"main\"&gt;\r\n\r\n      &lt;div class=\"container\"&gt;\r\n        &lt;div class=\"row\"&gt;\r\n          &lt;div class=\"col-sm-6 col-lg-4\"&gt;\r\n            &lt;h2 class=\"h4\"&gt;A demo of Bootstrap switch&lt;\/h2&gt;\r\n            &lt;p&gt;\r\n              &lt;input id=\"switch-state\" type=\"checkbox\" checked&gt;\r\n            &lt;\/p&gt;\r\n            &lt;div class=\"btn-group\"&gt;\r\n              &lt;button type=\"button\" data-switch-toggle=\"state\" class=\"btn btn-danger\"&gt;Toggle&lt;\/button&gt;\r\n              &lt;button type=\"button\" data-switch-set=\"state\" data-switch-value=\"true\" class=\"btn btn-default\"&gt;Set true&lt;\/button&gt;\r\n              &lt;button type=\"button\" data-switch-set=\"state\" data-switch-value=\"false\" class=\"btn btn-default\"&gt;Set false&lt;\/button&gt;\r\n              &lt;button type=\"button\" data-switch-get=\"state\" class=\"btn btn-success\"&gt;Get&lt;\/button&gt;\r\n            &lt;\/div&gt;\r\n          &lt;\/div&gt;\r\n  \r\n        &lt;\/div&gt;\r\n      &lt;\/div&gt;\r\n    &lt;\/main&gt;\r\n\r\n\r\n\r\n&lt;script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.11.1\/jquery.min.js\"&gt;&lt;\/script&gt; \r\n&lt;script src=\"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/3.3.6\/js\/bootstrap.min.js\"&gt;&lt;\/script&gt;\r\n    &lt;script src=\"js\/bootstrap-switch\/highlight.js\"&gt;&lt;\/script&gt;\r\n    &lt;script src=\"js\/bootstrap-switch\/bootstrap-switch.js\"&gt;&lt;\/script&gt;\r\n    &lt;script src=\"js\/bootstrap-switch\/main.js\"&gt;&lt;\/script&gt;\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;\r\n\r\n<\/pre>\n<h3><strong>A demo of creating differently sized toggle buttons<\/strong><\/h3>\n<p>You may also create differently sized switches other than the above example. You may set the size by using <em>data-size<\/em> attribute and assigning it any of the following values:<\/p>\n<ul>\n<li>mini<\/li>\n<li>small<\/li>\n<li>normal<\/li>\n<li>large<\/li>\n<\/ul>\n<p>See this example where I created four checkboxes (switches) with different sizes.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-full wp-image-1526\" src=\"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2016\/05\/34.0_2-Bootstrap-checkbox-switch-sizes.jpg\" alt=\"Bootstrap checkbox switch sizes\" width=\"268\" height=\"206\" \/><\/p>\n<p>The following markup is used for creating these switches:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;body&gt;\r\n\r\n    &lt;main id=\"content\" role=\"main\"&gt;\r\n\r\n      &lt;div class=\"container\"&gt;\r\n        &lt;div class=\"row\"&gt;\r\n          &lt;div class=\"col-sm-6 col-lg-4\"&gt;\r\n            &lt;h2 class=\"h4\"&gt;A demo of using different Sizes&lt;\/h2&gt;\r\n            &lt;p&gt;\r\n             &lt;input id=\"Bootswitch1\" type=\"checkbox\" checked data-size=\"mini\"&gt;\r\n            &lt;\/p&gt;\r\n\r\n            &lt;p&gt;\r\n              &lt;input id=\"Bootswitch2\" type=\"checkbox\" checked data-size=\"small\"&gt;\r\n            &lt;\/p&gt;     \r\n            \r\n            &lt;p&gt;\r\n              &lt;input id=\"Bootswitch3\" type=\"checkbox\" checked data-size=\"normal\"&gt;\r\n            &lt;\/p&gt;\r\n            \r\n            &lt;p&gt;\r\n              &lt;input id=\"Bootswitch4\" type=\"checkbox\" checked data-size=\"large\"&gt;\r\n            &lt;\/p&gt;                               \r\n            \r\n          &lt;\/div&gt;\r\n  \r\n        &lt;\/div&gt;\r\n      &lt;\/div&gt;\r\n    &lt;\/main&gt;<\/pre>\n<p>Get the complete code from the demo page.<\/p>\n<h3><strong>A demo of using different colors for On or true state<\/strong><\/h3>\n<p>You may use different colors for the switch other than the default blue, as used in above examples. By using the <em>data-on-color<\/em> data attribute, you may set different color values, for example:<\/p>\n<ul>\n<li>danger for red<\/li>\n<li>success for green<\/li>\n<li>info for light blue<\/li>\n<li>primary (default) for dark blue<\/li>\n<li>warning for orange<\/li>\n<\/ul>\n<p>(Typical colors of Bootstrap framework)<\/p>\n<p>See the example below where switches in Bootstrap are created with all these colors for ON\/True states.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-full wp-image-1527\" src=\"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2016\/05\/34.0_3-Bootstrap-checkbox-switch-colors.jpg\" alt=\"Bootstrap checkbox switch colors\" width=\"289\" height=\"251\" \/><\/p>\n<p>This is the markup for above example for creating multi-colored switches:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;body&gt;\r\n\r\n    &lt;main id=\"content\" role=\"main\"&gt;\r\n\r\n      &lt;div class=\"container\"&gt;\r\n        &lt;div class=\"row\"&gt;\r\n          &lt;div class=\"col-sm-6 col-lg-4\"&gt;\r\n            &lt;h2 class=\"h4\"&gt;A demo of On\/True Color switches&lt;\/h2&gt;\r\n            &lt;p&gt;\r\n              &lt;input id=\"switch-onColor\" type=\"checkbox\" checked data-on-color=\"warning\"&gt;\r\n            &lt;\/p&gt;\r\n            &lt;p&gt;\r\n              &lt;input id=\"switch-onColor\" type=\"checkbox\" checked data-on-color=\"default\"&gt;\r\n            &lt;\/p&gt;\r\n            &lt;p&gt;\r\n              &lt;input id=\"switch-onColor\" type=\"checkbox\" checked data-on-color=\"success\"&gt;\r\n            &lt;\/p&gt;\r\n            &lt;p&gt;\r\n              &lt;input id=\"switch-onColor\" type=\"checkbox\" checked data-on-color=\"info\"&gt;\r\n            &lt;\/p&gt;\r\n            &lt;p&gt;\r\n              &lt;input id=\"switch-onColor\" type=\"checkbox\" checked data-on-color=\"primary\"&gt;\r\n            &lt;\/p&gt;                                    \r\n          &lt;\/div&gt;\r\n  \r\n        &lt;\/div&gt;\r\n      &lt;\/div&gt;\r\n    &lt;\/main&gt;<\/pre>\n<h3><strong>A demo of creating Off\/false state colored switches<\/strong><\/h3>\n<p>Just like I created on-color switches by using <em>data-on-color<\/em> attribute, you may create off-color toggle switches by using the <strong><em>data-off-color<\/em><\/strong> attribute with the\u00a0same color specification.<\/p>\n<p>See the following demo where Bootstrap switches are created with different colors for both; On and Off states:<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter wp-image-1528 size-full\" src=\"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2016\/05\/34.0_4-Bootstrap-checkbox-switch-color-off.jpg\" alt=\"Bootstrap checkbox toggle color-off\" width=\"288\" height=\"247\" \/><\/p>\n<p>The markup for creating off\/on various colored switches:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;p&gt;\r\n\r\n&lt;input id=\"switch-onColor\" type=\"checkbox\"\u00a0 data-on-color=\"primary\" data-off-color=\"warning\"&gt;\r\n\r\n&lt;\/p&gt;\r\n\r\n&lt;p&gt;\r\n\r\n&lt;input id=\"switch-onColor\" type=\"checkbox\"\u00a0 data-on-color=\"success\" data-off-color=\"danger\"&gt;\r\n\r\n&lt;\/p&gt;\r\n\r\n&lt;p&gt;\r\n\r\n&lt;input id=\"switch-onColor\" type=\"checkbox\"\u00a0 data-on-color=\"info\" data-off-color=\"success\"&gt;\r\n\r\n&lt;\/p&gt;\r\n\r\n&lt;p&gt;\r\n\r\n&lt;input id=\"switch-onColor\" type=\"checkbox\"\u00a0 data-on-color=\"danger\" data-off-color=\"info\"&gt;\r\n\r\n&lt;\/p&gt;\r\n\r\n&lt;p&gt;\r\n\r\n&lt;input id=\"switch-onColor\" type=\"checkbox\"\u00a0 data-on-color=\"danger\" data-off-color=\"primary\"&gt;\r\n\r\n&lt;\/p&gt;<\/pre>\n<h3><strong>A demo of using custom text\/captions in switches<\/strong><\/h3>\n<p>In all above examples, I used On and Off text for the switches. Practically, you will need different captions to choose for the users. For example, select Yes or No, True or false, Agree or Disagree by clicking a toggle switch.<\/p>\n<p>By using the <strong><em>data-on-text<\/em> <\/strong>and <strong><em>data-off-text<\/em><\/strong> attributes, you may use any text as per the\u00a0need of the situation.<\/p>\n<p>See the following example where I created three switches with the text as follows:<\/p>\n<ol>\n<li>Yes \/ No<\/li>\n<li>True \/ False<\/li>\n<li>Agree \/ Disagree<\/li>\n<\/ol>\n<p>Along with text, various colors are used by using related data attributes:<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-full wp-image-1529\" src=\"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2016\/05\/34.0_5-Bootstrap-switch-text.jpg\" alt=\"Bootstrap switch text\" width=\"240\" height=\"176\" \/><\/p>\n<p><strong>The markup:<\/strong><\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;p&gt;\r\n\r\n&lt;input id=\"bootswitch-text1\" type=\"checkbox\"\u00a0 data-on-color=\"primary\" data-off-color=\"warning\" data-on-text=\"Yes\" data-off-text=\"No\"&gt;\r\n\r\n&lt;\/p&gt;\r\n\r\n&lt;p&gt;\r\n\r\n&lt;input id=\"bootswitch-text2\" type=\"checkbox\"\u00a0 data-on-color=\"success\" data-off-color=\"danger\" data-on-text=\"True\" data-off-text=\"False\"&gt;\r\n\r\n&lt;\/p&gt;\r\n\r\n&lt;p&gt;\r\n\r\n&lt;input id=\"bootswitch-text3\" type=\"checkbox\"\u00a0 data-on-color=\"info\" data-off-color=\"success\" data-on-text=\"Agree\" data-off-text=\"Disagree\"&gt;\r\n\r\n&lt;\/p&gt;<\/pre>\n<h3><strong>A demo of dealing with the width of Bootstrap toggle switches<\/strong><\/h3>\n<p>Use the <em>data-handle-width<\/em> data attribute with the value like 100, 150, 200 etc. for setting the width of switches. In above examples, you have\u00a0seen the switches adjusted according to the given text.<\/p>\n<p>In this demo, width is set by using data attribute. See the above example with various width sizes:<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-full wp-image-1530\" src=\"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2016\/05\/34.0_6-Bootstrap-switch-width.jpg\" alt=\"Bootstrap switch width\" width=\"463\" height=\"186\" srcset=\"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2016\/05\/34.0_6-Bootstrap-switch-width.jpg 463w, https:\/\/www.jquery-az.com\/wp-content\/uploads\/2016\/05\/34.0_6-Bootstrap-switch-width-300x120.jpg 300w\" sizes=\"(max-width: 463px) 100vw, 463px\" \/><\/p>\n<p>The markup with various attributed including width:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;p&gt;\r\n\r\n&lt;input id=\"bootswitch-width1\" type=\"checkbox\" data-handle-width=\"100\"\u00a0 data-on-color=\"primary\" data-off-color=\"warning\" data-on-text=\"Yes\" data-off-text=\"No\" checked&gt;\r\n\r\n&lt;\/p&gt;\r\n\r\n&lt;p&gt;\r\n\r\n&lt;input id=\"bootswitch-width2\" type=\"checkbox\" data-handle-width=\"150\"\u00a0 data-on-color=\"success\" data-off-color=\"danger\" data-on-text=\"True\" data-off-text=\"False\" checked&gt;\r\n\r\n&lt;\/p&gt;\r\n\r\n&lt;p&gt;\r\n\r\n&lt;input id=\"bootswitch-width3\" type=\"checkbox\" data-handle-width=\"200\"\u00a0 data-on-color=\"info\" data-off-color=\"success\" data-on-text=\"Agree\" data-off-text=\"Disagree\"&gt;\r\n\r\n&lt;\/p&gt;<\/pre>\n<h3><strong>Converting radio buttons into toggle switches demo<\/strong><\/h3>\n<p>In all above examples, the checkboxes are used as switches. You may also use <a href=\"\/ways-to-use-bootstrap-radio-buttons-with-4-examples\/\">radio buttons<\/a> for converting those to switches as well.<\/p>\n<p>In this demo, three radio buttons are used for creating switches with different data attributes like setting the color. See the demo and code by clicking the links below:<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-full wp-image-1531\" src=\"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2016\/05\/34.0_7-Bootstrap-radio-switch.jpg\" alt=\"Bootstrap radio switch\" width=\"354\" height=\"86\" srcset=\"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2016\/05\/34.0_7-Bootstrap-radio-switch.jpg 354w, https:\/\/www.jquery-az.com\/wp-content\/uploads\/2016\/05\/34.0_7-Bootstrap-radio-switch-300x72.jpg 300w\" sizes=\"(max-width: 354px) 100vw, 354px\" \/><\/p>\n<p><strong>The markup:<\/strong><\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;h3 class=\"h5\"&gt;A demo of radio buttons as switch&lt;\/h3&gt;\r\n\r\n&lt;input type=\"radio\" name=\"radio1\" checked data-on-color=\"success\" data-off-color=\"warning\" class=\"switch-radio1\"&gt;\r\n\r\n&lt;input type=\"radio\" name=\"radio1\" data-on-color=\"danger\" data-off-color=\"warning\" class=\"switch-radio1\"&gt;\r\n\r\n&lt;input type=\"radio\" name=\"radio1\" data-on-color=\"info\" data-off-color=\"primary\"\u00a0 class=\"switch-radio1\"&gt;<\/pre>\n<p>Read more about the available options by visiting the plug-in page (link provided with credit in the above section).<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The Bootstrap toggle switches by using checkbox and radio button In this tutorial, I am going to show you a plug-in that can be used for creating nice-looking switches by turning radio buttons or checkboxes that use the Bootstrap framework. It requires you to add a few dependency files that include Bootstrap CSS and JS &#8230; <a title=\"7 Demos of Bootstrap Toggle\/Switch by Checkbox and Radio button\" class=\"read-more\" href=\"https:\/\/www.jquery-az.com\/checkbox-and-radio-button-as-bootstrap-switches-7-demos\/\" aria-label=\"More on 7 Demos of Bootstrap Toggle\/Switch by Checkbox and Radio button\">Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":1528,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[11],"tags":[32,30],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v21.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>7 Demos of Bootstrap Toggle\/Switch by Checkbox and Radio button<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.jquery-az.com\/checkbox-and-radio-button-as-bootstrap-switches-7-demos\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"7 Demos of Bootstrap Toggle\/Switch by Checkbox and Radio button\" \/>\n<meta property=\"og:description\" content=\"The Bootstrap toggle switches by using checkbox and radio button In this tutorial, I am going to show you a plug-in that can be used for creating nice-looking switches by turning radio buttons or checkboxes that use the Bootstrap framework. It requires you to add a few dependency files that include Bootstrap CSS and JS ... Read more\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.jquery-az.com\/checkbox-and-radio-button-as-bootstrap-switches-7-demos\/\" \/>\n<meta property=\"article:published_time\" content=\"2016-05-11T07:42:17+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-01-20T13:23:27+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2016\/05\/34.0_4-Bootstrap-checkbox-switch-color-off.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"288\" \/>\n\t<meta property=\"og:image:height\" content=\"247\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"jqueryaz\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"jqueryaz\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.jquery-az.com\/checkbox-and-radio-button-as-bootstrap-switches-7-demos\/\",\"url\":\"https:\/\/www.jquery-az.com\/checkbox-and-radio-button-as-bootstrap-switches-7-demos\/\",\"name\":\"7 Demos of Bootstrap Toggle\/Switch by Checkbox and Radio button\",\"isPartOf\":{\"@id\":\"https:\/\/www.jquery-az.com\/#website\"},\"datePublished\":\"2016-05-11T07:42:17+00:00\",\"dateModified\":\"2024-01-20T13:23:27+00:00\",\"author\":{\"@id\":\"https:\/\/www.jquery-az.com\/#\/schema\/person\/c3f75f86b1c65bf0b93fc46f629fcad3\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.jquery-az.com\/checkbox-and-radio-button-as-bootstrap-switches-7-demos\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.jquery-az.com\/checkbox-and-radio-button-as-bootstrap-switches-7-demos\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.jquery-az.com\/checkbox-and-radio-button-as-bootstrap-switches-7-demos\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.jquery-az.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"7 Demos of Bootstrap Toggle\/Switch by Checkbox and Radio button\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.jquery-az.com\/#website\",\"url\":\"https:\/\/www.jquery-az.com\/\",\"name\":\"\",\"description\":\"PHP, Bootstrap, jQuery, CSS, Python, Java and others\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.jquery-az.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.jquery-az.com\/#\/schema\/person\/c3f75f86b1c65bf0b93fc46f629fcad3\",\"name\":\"jqueryaz\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.jquery-az.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/e2a3743b4da71bd52984e02bd5c3280c?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/e2a3743b4da71bd52984e02bd5c3280c?s=96&d=mm&r=g\",\"caption\":\"jqueryaz\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"7 Demos of Bootstrap Toggle\/Switch by Checkbox and Radio button","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.jquery-az.com\/checkbox-and-radio-button-as-bootstrap-switches-7-demos\/","og_locale":"en_US","og_type":"article","og_title":"7 Demos of Bootstrap Toggle\/Switch by Checkbox and Radio button","og_description":"The Bootstrap toggle switches by using checkbox and radio button In this tutorial, I am going to show you a plug-in that can be used for creating nice-looking switches by turning radio buttons or checkboxes that use the Bootstrap framework. It requires you to add a few dependency files that include Bootstrap CSS and JS ... Read more","og_url":"https:\/\/www.jquery-az.com\/checkbox-and-radio-button-as-bootstrap-switches-7-demos\/","article_published_time":"2016-05-11T07:42:17+00:00","article_modified_time":"2024-01-20T13:23:27+00:00","og_image":[{"width":288,"height":247,"url":"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2016\/05\/34.0_4-Bootstrap-checkbox-switch-color-off.jpg","type":"image\/jpeg"}],"author":"jqueryaz","twitter_misc":{"Written by":"jqueryaz","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.jquery-az.com\/checkbox-and-radio-button-as-bootstrap-switches-7-demos\/","url":"https:\/\/www.jquery-az.com\/checkbox-and-radio-button-as-bootstrap-switches-7-demos\/","name":"7 Demos of Bootstrap Toggle\/Switch by Checkbox and Radio button","isPartOf":{"@id":"https:\/\/www.jquery-az.com\/#website"},"datePublished":"2016-05-11T07:42:17+00:00","dateModified":"2024-01-20T13:23:27+00:00","author":{"@id":"https:\/\/www.jquery-az.com\/#\/schema\/person\/c3f75f86b1c65bf0b93fc46f629fcad3"},"breadcrumb":{"@id":"https:\/\/www.jquery-az.com\/checkbox-and-radio-button-as-bootstrap-switches-7-demos\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.jquery-az.com\/checkbox-and-radio-button-as-bootstrap-switches-7-demos\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.jquery-az.com\/checkbox-and-radio-button-as-bootstrap-switches-7-demos\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.jquery-az.com\/"},{"@type":"ListItem","position":2,"name":"7 Demos of Bootstrap Toggle\/Switch by Checkbox and Radio button"}]},{"@type":"WebSite","@id":"https:\/\/www.jquery-az.com\/#website","url":"https:\/\/www.jquery-az.com\/","name":"","description":"PHP, Bootstrap, jQuery, CSS, Python, Java and others","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.jquery-az.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.jquery-az.com\/#\/schema\/person\/c3f75f86b1c65bf0b93fc46f629fcad3","name":"jqueryaz","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.jquery-az.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/e2a3743b4da71bd52984e02bd5c3280c?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/e2a3743b4da71bd52984e02bd5c3280c?s=96&d=mm&r=g","caption":"jqueryaz"}}]}},"_links":{"self":[{"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/posts\/1524"}],"collection":[{"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/comments?post=1524"}],"version-history":[{"count":5,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/posts\/1524\/revisions"}],"predecessor-version":[{"id":12316,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/posts\/1524\/revisions\/12316"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/media\/1528"}],"wp:attachment":[{"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/media?parent=1524"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/categories?post=1524"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/tags?post=1524"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}