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

试试这个：

codontable

修改

你错过了hungerstar所指出的prop（）方法的第二个参数。使用$("#toggle-event").attr('checked', 'checked');比使用.prop()
更正确
注意：在您的示例中.attr()完全不正确。该方法用于显示/隐藏元素，并且永远不会起作用。 http://api.jquery.com/toggle/

Answer 2

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

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

您还可以将checked属性添加到元素中，以便从get go开始将其置于已检查状态。

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

Answer 3

只需在输入元素上添加checked属性即可。不需要javascript代码。

更新了HTML

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

JS小提琴链接：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')); }; }); });

如何使用javascript切换onload

4 个答案:

HTML

CSS

Jquery的