复选框不会触发页面加载功能答案

【问题标题】：Checkbox will not fire function onLoad of page复选框不会触发页面加载功能
【发布时间】：2018-06-05 19:11:46
【问题描述】：

我已经连续 8 个小时在这个问题上苦苦思索，但我无法弄清楚。

环境：我正在开发一个 web 应用程序，它有一个按钮/开关，当单击/选中时会切换一个复选框。当复选框被选中时，它会触发一个调用 PHP 脚本的函数。取消选中时，它会暂停 PHP 脚本。这一切都很好。

ISSUE：我也将复选框配置为在页面加载时处于选中状态，从而在页面加载时自动触发该功能。但是，现在，当我加载页面时，复选框被选中，但该功能不会自动触发，直到手动切换复选框。

我使用了很多不同的变量和解决方案，但我无法弄清楚。我假设它与“标签”类有关？

我做错了什么？

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

【问题讨论】：

你没有#statusloop和#stats的html实体。 jQuery 静默失败。

标签： javascript jquery html checkbox

【解决方案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 或以下 sn-p 的更新版本。

片段：

/* ----- 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 论坛的主题，突出了这个特定问题。

【讨论】：

我很高兴能帮助你@SeanVreeland。祝你有美好的一天?

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

您可以在 ready 函数中执行类似的操作，它会起作用。

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

【讨论】：