how to make toggle on onload with javascript

Question

I'm using a toggle on my website, and i would like to control it using javascript. So far it only works with html and css and no javascript. I would like to control it with javascript, and make it on page load to be "on" instead of off.

html

<label class="switch">
    <input type="checkbox" id="toggle-event">
    <span class="slider round"></span>
</label>

css

.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
}

.switch input {
    display: none;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
}

input:checked + .slider {
    background-color: #0000FF;
}

input:focus + .slider {
    box-shadow: 0 0 1px #0000FF;
}

input:checked + .slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
}

.slider.round {
    border-radius: 34px;
}

.slider.round:before {
    border-radius: 50%;
}

I tried making it work like this, but it doesnt work.

($("#toggle-event").prop("checked"))

($("#toggle-event").toggle("show"))

Here is jsfiddle

Any help is appreciated!

Answer 1

prop() accepts a second parameter to set a value for a property. Currently you're only getting the value for the property checked. Try

$( '#toggle-event' ).prop( 'checked', true );

Also make sure you place the JS before </body> or in $( ...your code... ) so it get's executed when the DOM for the element exists.

$( '#toggle-event' ).prop( 'checked', true );

.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.switch input {
  display: none;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked+.slider {
  background-color: #0000FF;
}

input:focus+.slider {
  box-shadow: 0 0 1px #0000FF;
}

input:checked+.slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class="switch">
    <input type="checkbox" id="toggle-event">
    <span class="slider round"></span>
</label>

---

You can also add the checked attribute to your element to placed it in a checked state from the get go.

<input type="checkbox" id="toggle-event" checked="checked">

Answer 2

Simply put checked attribute on input element. No javascript code required.

Updated HTML

<label class="switch">
<input checked type="checkbox" id="toggle-event">
<span class="slider round"></span>
</label>

JS Fiddle link: https://jsfiddle.net/0kzzcrnq/

Answer 3

Try this:

$("#toggle-event").attr('checked', 'checked');

Edit:

You were missing the second parameter of the prop() method as noted by hungerstar. It is more correct to use .prop() than .attr()

Note: in your sample .toggle() is completely incorrect. That method is for showing/hiding elements and would never work. http://api.jquery.com/toggle/

Answer 4

HTML

<div class="switch"> <label for="mycheckbox" class="switch-toggle" data-on="On" data-off="Off"></label> <input type="checkbox" id="mycheckbox" /> </div>

The element containing the checkbox and the label should have the class switch assigned. The label element needs the class switch-toggle as well as the data-on and data-on attributes to define the label texts for the two statuses.

It is important that the .switch element contains only one checkbox and that the checkbox and the label are direct children of the .switch element.

CSS

label.switch-toggle { 
    background: url('switch.png') repeat-y; 
    display: block !important; 
    height: 12px; 
    padding-left: 26px; 
    cursor: pointer; 
    display: none; 
    } 

label.switch-toggle.on { 
background-position: 0 12px; 
} 

label.switch-toggle.off {
 background-position: 0 0;
 } 

label.switch-toggle.hidden { 
display: none; 
}

Jquery

$(document).ready(function() {
        $('.switch').each(function() {
            var checkbox = $(this).children('input[type=checkbox]');
            var toggle = $(this).children('label.switch-toggle');
            if (checkbox.length) {
                checkbox.addClass('hidden');
                toggle.removeClass('hidden');
                if (checkbox[0].checked) {
                    toggle.addClass('on');
                    toggle.removeClass('off');
                    toggle.text(toggle.attr('data-on'));
                } else {
                    toggle.addClass('off');
                    toggle.removeClass('on');
                    toggle.text(toggle.attr('data-off'));
                };
            }
        });
        $('.switch-toggle').click(function() {
                    var checkbox = $(this).siblings('input[type=checkbox]')[0];
                    var toggle = $(this); // We need to inverse the logic here, because at the time of processing, // the checked status has not been enabled yet. if (checkbox.checked) { toggle.addClass('off'); toggle.removeClass('on'); toggle.text(toggle.attr('data-off')); } else { toggle.addClass('on'); toggle.removeClass('off'); toggle.text(toggle.attr('data-on')); }; }); });