我已经在这个问题上直接敲了8个小时，我无法理解。
环境：我正在开发一个webapp，它有一个按钮/开关，可以在单击/选中时切换复选框。选中该复选框后，它将触发一个调用PHP脚本的函数。当UNchecked时，它会暂停PHP脚本。这一切都很有效。
问题：我还在页面加载时将复选框配置为处于检查状态，从而在页面加载时自动触发该功能。但是，现在，当我加载页面时，复选框被选中，但功能不会自动触发，直到手动切换复选框。
我使用了很多不同的变量和解决方案，但我无法弄清楚。我假设它与“标签”类有关？
我究竟做错了什么？
示例：您可以忽略PHP的内容，因为我提供了测试警报。您将选中该复选框的onload，但警报不会触发onload，但会在手动选中该复选框时触发。
<script>
var nIntervId;
var onload;
function statusCheck() {
$("#statusloop").load('assets/php/loop.php');
$("#stats").load('assets/php/systembadges.php');
};
$(document).ready(function() {
$(":checkbox").change(function() {
if ($(this).is(':checked')) {
nIntervId = setInterval(statusCheck, 3000);
alert("checked");
} else {
clearInterval(nIntervId);
alert("NOTchecked");
}
});
});
</script>
<body onload="statusCheck()">
<label class="switch" id="buttonStart">
<input type="checkbox">
<span class="slider round"></span>
</label>
<script>
$('#buttonStart :checkbox').attr('checked', 'checked');
</script>
</body>
为了实现您的目标，您需要做两件事：
change事件后，选中复选框。在您的代码中，在设置change事件之前检查您的复选框。change事件，因为通过JavaScript更改为input不会触发change事件。您可以通过调用change()来执行此操作，如果您已经设置了事件或trigger("change")来触发change事件。码：
$(document).ready(function() {
/* Set the 'change' event. */
$(":checkbox").change(function() {
// ...
});
/* Check the checkbox and trigger the event. */
$('#buttonStart :checkbox').attr('checked', 'checked').change();
// OR → $('#buttonStart :checkbox').trigger("change");
});
查看jsfiddle here的更新版本或以下代码段。
片段：
/* ----- JavaScript ----- */
var nIntervId;
var onload;
function statusCheck() {
$("#statusloop").load('assets/php/loop.php');
$("#stats").load('assets/php/systembadges.php');
};
$(document).ready(function() {
/* Set the 'change' event. */
$(":checkbox").change(function() {
if ($(this).is(':checked')) {
nIntervId = setInterval(statusCheck, 3000);
console.log("checked");
} else {
clearInterval(nIntervId);
console.log("NOT checked");
}
});
/* Check the checkbox and trigger the event. */
$('#buttonStart :checkbox').attr('checked', 'checked').change();
});/* ----- 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: #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%;
}<!----- HTML ----->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class="switch" id="buttonStart">
<input type="checkbox">
<span class="slider round"></span>
</label>参考：
Here是来自jQuery论坛的主题，突出了这个具体问题。
而不是使用WebSockets轮询PHP脚本可能是一种更好的方法。
话虽这么说，你可以通过触发document.ready中的间隔并在is(':checked')函数中执行statusCheck来修复脚本。这样，间隔始终在运行，并且仅在选中复选框时才执行加载。
你可以在准备好的功能中做这样的事情，它会起作用。
if ($(':checkbox').is('checked')) {
// dosomething() ;
alert('checked');
} else {
alert('not cheked');
}