如何使用javascript在onload上进行切换

Question

我在我的网站上使用了一个切换开关，我想使用 javascript 来控制它。到目前为止，它只适用于 html 和 css 而没有 javascript。我想用 javascript 控制它，并在页面加载时将其设置为“打开”而不是关闭。

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%;
}

我试着让它像这样工作，但它不起作用。

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

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

这里是jsfiddle

感谢任何帮助！

Answer 1

试试这个：

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

编辑：

如饥饿之星所述，您缺少 prop() 方法的第二个参数。 使用.prop() 比使用.attr() 更正确

注意：在您的示例中 .toggle() 是完全不正确的。该方法用于显示/隐藏元素，并且永远不会起作用。 http://api.jquery.com/toggle/

Answer 2

prop() 接受第二个参数来设置属性的值。目前您只能获得属性checked 的值。试试

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

还要确保将 JS 放在 </body> 之前或 $( ...your code... ) 中，以便在元素的 DOM 存在时执行。

$( '#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>

---

您还可以将checked 属性添加到您的元素，使其从一开始就处于选中状态。

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

Answer 3

只需将选中的属性放在输入元素上。无需 javascript 代码。

更新的 HTML

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

JS Fiddle 链接：https://jsfiddle.net/0kzzcrnq/

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>

包含复选框和标签的元素应分配类开关。 label 元素需要类 switch-toggle 以及 data-on 和 data-on 属性来定义两种状态的标签文本。

.switch 元素只包含一个复选框并且复选框和标签是 .switch 元素的直接子元素，这一点很重要。

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')); }; }); });