Question

我已经在这个问题上直接敲了8个小时，我无法弄明白。

环境：我正在开发一个webapp，它有一个按钮/开关，可在单击/选中时切换复选框。选中该复选框后，它将触发一个调用PHP脚本的函数。当UNchecked时，它会暂停PHP脚本。这一切都很有效。

问题：我还在页面加载时配置了处于检查状态的复选框，从而在页面加载时自动触发该功能。但是，现在，当我加载页面时，复选框被选中，但功能不会自动触发，直到手动切换复选框。

我使用了很多不同的变量和解决方案，但我无法弄明白。我假设它与＆＃34;标签＆＃34;有关。类？

我做错了什么？

示例：您可以忽略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>

Answer 1

为了实现您的目标，您需要做两件事：

设置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或以下代码段的更新版本。

<强>段：

＆＃13;

/* ----- 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();
});

＆＃13;

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

＆＃13;

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

＆＃13;

<强>参考：

Here是来自jQuery论坛的主题，突出了这个具体问题。

Answer 2

您可以在准备好功能中执行此类操作，并且可以正常使用。

  if ($(':checkbox').is('checked')) {
    //    dosomething() ;
    alert('checked');
   } else {
      alert('not cheked');
   }

Answer 3

而不是使用WebSockets轮询PHP脚本可能是一种更好的方法。

话虽这么说，您可以通过触发document.ready中的时间间隔并在is(':checked')函数内执行statusCheck来修复脚本。这样，间隔始终在运行，只有选中复选框才会执行加载。

复选框不会激活onLoad页面上的函数

3 个答案: