How to make one button to switch on and off using Jquery

Question

Hi team Can anyone mate help, i want to create a 1 button that can switch being on and off, using both HTML and Jquery. Thanks a useful of examples will be highly appreciated.

Sanwar Ranwa · Answer

Hi Gcobani Check the following links https://www.jqueryscript.net/form/Custom-On-Off-Toggle-Switch-Plugin-For-jQuery-on-off-switch-js.html https://blog.dbrgn.ch/2011/11/21/jquery-checkbox-on-off-toggleswitch/ https://www.w3schools.com/jquery/eff_toggle.asp

Harsh Shah · Answer

Hi I have made a demo for you. > html > body > div > img id = "myImage" src = "switchOff.jpg" style = "width:500px; height:150px;" > div > div style = "margin-left:300px;" > button id = "Switch" onmouseover = "this.style.cursor='pointer'" onclick = "toggleImg()" > Turn on button > div > script type = "text/javascript" > function toggleImg() { var img = document .getElementById('myImage').src; if (img.indexOf('switchOff.jpg') != -1) { document.getElementById('myImage') .src = 'switchOn.jpg' ; document.getElementById('Switch') .innerHTML = 'Turn off' } else { document.getElementById('myImage') .src = 'switchOff.jpg' ; document.getElementById('Switch') .innerHTML = 'Turn on' } } script > body > html > Try to run above code. Let me know if you have any query. Hope this will help you. Thank you.

Dipa Mehta · Answer

switch --> class = "switch" > "checkbox" > class = "slider" > switch --> class = "switch" > "checkbox" > class = "slider round" > Add CSS: /* The switch - the box around the slider */ .switch { position : relative ; display : inline- block ; width : 60px ; height : 34px ; } /* Hide default HTML checkbox */ .switch input { opacity: 0 ; width : 0 ; height : 0 ; } /* The slider */ .slider { position : absolute ; cursor : pointer ; top: 0 ; left: 0 ; right: 0 ; bottom: 0 ; background-color : #ccc ; -webkit-transition: . 4 s; transition: . 4 s; } .slider:before { position : absolute ; content : "" ; height : 26px ; width : 26px ; left: 4px ; bottom: 4px ; background-color : white ; -webkit-transition: . 4 s; transition: . 4 s; } input:checked + .slider { background-color : #2196F3 ; } input:focus + .slider { box-shadow: 0 0 1px #2196F3 ; } input:checked + .slider:before { -webkit-transform: translateX( 26px ); -ms-transform: translateX( 26px ); transform: translateX( 26px ); } /* Rounded sliders */ .slider.round { border-radius: 34px ; } .slider.round:before { border-radius: 50% ; }

Guest User · Answer

I can see the link, can at least get an example of one scenario to this issue. I am using bootstrap, want to see what am i missing on the order of my stylesheet, seem they not loading well now on the browser.

Salman Beg · Answer

Hi. You can use 0 for Switch ON and 1 for Switch OFF. So in the jquery you can check if value is 0 then ON otherwise OFF. Thanks.