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

Guest User

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.

5 Replies

Know the answer? Post it — somebody with the same question will find it here.

Sanwar Ranwa6y ago
Accepted 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 Shah6y ago
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 Mehta6y ago
2. class="switch">
3. "checkbox">
4. class="slider">
8. class="switch">
9. "checkbox">
10. class="slider round">
Add CSS:
1. /* The switch - the box around the slider */
2. .switch {
3. position: relative;
4. display: inline-block;
5. width: 60px;
6. height: 34px;
7. }
9. /* Hide default HTML checkbox */
10. .switch input {
11. opacity: 0;
12. width: 0;
13. height: 0;
14. }
16. /* The slider */
17. .slider {
18. position: absolute;
19. cursor: pointer;
20. top: 0;
21. left: 0;
22. right: 0;
23. bottom: 0;
24. background-color: #ccc;
25. -webkit-transition: .4s;
26. transition: .4s;
27. }
29. .slider:before {
30. position: absolute;
31. content: "";
32. height: 26px;
33. width: 26px;
34. left: 4px;
35. bottom: 4px;
36. background-color: white;
37. -webkit-transition: .4s;
38. transition: .4s;
39. }
41. input:checked + .slider {
42. background-color: #2196F3;
43. }
45. input:focus + .slider {
46. box-shadow: 0 0 1px #2196F3;
47. }
49. input:checked + .slider:before {
50. -webkit-transform: translateX(26px);
51. -ms-transform: translateX(26px);
52. transform: translateX(26px);
53. }
55. /* Rounded sliders */
56. .slider.round {
57. border-radius: 34px;
58. }
60. .slider.round:before {
61. border-radius: 50%;
62. }

Guest User6y ago

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 Beg6y ago

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.