Let’s say you have some HTML\/CSS switches in place of a traditional checkbox.<\/p>\n
jQuery makes it easy to toggle switches on or off. For example:<\/p>\n
function toggle(){\r\n $('.slider').click();\r\n}<\/pre>\nWhich can be called in a button like so:<\/p>\n
<button type=\"button\" class=\"btn btn-primary\" onClick=\"toggle();\">Toggle<\/button><\/pre>\nFor example:<\/p>\n
\nSee the Pen Toggle Switches! (jQuery) by Chris Nielsen (@Chris_Nielsen) on CodePen.<\/p>\n\n
<\/p>\n
Note: This same jQuery can be triggered without clicking a button by simply calling the function in response to some other trigger or condition.<\/p>\n
Here is what the HTML looks like:<\/p>\n
<div class=\"box\">\r\n <h2><b>Toggle Switch<\/b><\/h2>\r\n\r\n<!-- gray square -->\r\n<label class=\"switch\">\r\n <input type=\"checkbox\">\r\n <span class=\"slider\"><\/span>\r\n<\/label>\r\n\r\n<!-- orange square -->\r\n<label class=\"switch\">\r\n <input type=\"checkbox\" checked>\r\n <span class=\"slider\"><\/span>\r\n<\/label>\r\n\r\n<br><br>\r\n\r\n<!-- gray rounded -->\r\n<label class=\"switch\">\r\n <input type=\"checkbox\">\r\n <span class=\"slider round\"><\/span>\r\n<\/label>\r\n\r\n<!-- orange rounded -->\r\n<label class=\"switch\">\r\n <input type=\"checkbox\" checked>\r\n <span class=\"slider round\"><\/span>\r\n<\/label>\r\n\r\n<br><br>\r\n<button type=\"button\" class=\"btn btn-primary\" \r\n onClick=\"toggle();\">Toggle<\/button>\r\n<\/div>\r\n\r\n\r\n<\/pre>\nAnd here is the CSS:<\/p>\n
body {\r\n font-family: 'Open Sans', sans-serif;\r\n background-color: #673AB7;\r\n}\r\n\r\n.switch {\r\n position: relative;\r\n display: inline-block;\r\n width: 60px;\r\n height: 30px;\r\n}\r\n\r\n.switch input {display:none;}\r\n\r\n.slider {\r\n position: absolute;\r\n cursor: pointer;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n background-color: #ccc;\r\n -webkit-transition: .4s;\r\n transition: .4s;\r\n}\r\n\r\n.slider:before {\r\n position: absolute;\r\n content: \"\";\r\n height: 24px;\r\n width: 24px;\r\n left: 4px;\r\n bottom: 3px;\r\n background-color: white;\r\n -webkit-transition: .2s;\r\n transition: .2s;\r\n}\r\n\r\ninput:checked + .slider {\r\n background-color: #D84315;\r\n}\r\n\r\ninput:focus + .slider {\r\n box-shadow: 0 0 1px #D84315;\r\n}\r\n\r\ninput:checked + .slider:before {\r\n -webkit-transform: translateX(28px);\r\n -ms-transform: translateX(28px);\r\n transform: translateX(28px);\r\n}\r\n\r\n\/* Rounded sliders *\/\r\n.slider.round {\r\n border-radius: 28px;\r\n}\r\n\r\n.slider.round:before {\r\n border-radius: 50%;\r\n}\r\n\r\n.box {\r\n margin: 25px;\r\n border: 1px solid #ccc;\r\n width: 300px;\r\n padding: 0px 30px 30px 30px;\r\n background-color: white;\r\n}\r\n\r\nh2 {\r\n padding-bottom: 25px;\r\n}\r\n\r\n.btn {\r\n border-radius: 14px;\r\n border: none;\r\n padding: 5px 15px 5px 15px;\r\n font-size: 16px;\r\n}\r\n\r\n.btn {\r\n border-radius: 14px;\r\n border: none;\r\n}\r\n\r\n<\/pre>\n <\/p>\n
For more information about the jQuery .click() function, see:
\n.click()<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"Let’s say you have some HTML\/CSS switches in place of a traditional checkbox. jQuery makes it easy to toggle switches on or off. For example: function toggle(){ $(‘.slider’).click(); } Which can be called in a button like so: <button type=”button” class=”btn btn-primary” onClick=”toggle();”>Toggle<\/button> For example: Note: This same jQuery can be triggered without clicking … Continue reading jQuery: How to toggle switches programmatically<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[44,128],"tags":[10,105,45,123],"class_list":["post-2145","post","type-post","status-publish","format-standard","hentry","category-javascript-language","category-jquery","tag-css","tag-html","tag-javascript","tag-jquery"],"_links":{"self":[{"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts\/2145","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/comments?post=2145"}],"version-history":[{"count":4,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts\/2145\/revisions"}],"predecessor-version":[{"id":2149,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts\/2145\/revisions\/2149"}],"wp:attachment":[{"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/media?parent=2145"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/categories?post=2145"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/tags?post=2145"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}