使用 JavaScript 切换 Bootstrap Toggle 元素（并显示动画）答案

【问题标题】：Toggle a Bootstrap Toggle element with JavaScript (and show animation)使用 JavaScript 切换 Bootstrap Toggle 元素（并显示动画）
【发布时间】：2017-09-12 13:21:45
【问题描述】：

我有一个 Bootstrap Toggle 元素，如下所示：

&lt;input id="neutralInd" type="checkbox" name="neutralSite" onchange="setEventSite('neutral')" data-toggle="toggle" data-on="Yes" data-off="No"&gt;

点击它后，它将在是和否之间切换，并成功执行一个 JavaScript 函数来执行其他操作（代码如下）。

这是我想做的：

在页面上的其他位置选择单选按钮后，它将执行将引导切换切换为否的 JavaScript。这是我到目前为止的代码：

定义单选按钮：

<div class="radio">
  <label><input type="radio" id="homeTeam<?php echo $row; ?>" name="homeTeam" onchange="setEventSite('team')"></label>
</div>

JavaScript函数代码：

function setEventSite(chosen) {
  var neutralInd = document.getElementById("neutralInd"); // Toggle
  var locationOverride = document.getElementById("locationOverride"); // Text field
  var homeTeam = document.getElementsByName("homeTeam"); // Radio buttons

  if (chosen == "neutral") { // Toggle was clicked (changed)
    if (neutralInd.checked) {
      locationOverride.readOnly = false;
      for(var i=0; i<homeTeam.length; i++) { homeTeam[i].checked = false; }
    }
    else {
      locationOverride.value = "";
      locationOverride.readOnly = true;
    }
  } else if (chosen == "team") // Radio button was selected
  {
    neutralInd.checked = false;
    neutralInd.value="off";
    locationOverride.value = "";
    locationOverride.readOnly = true;
  }
}

当我选择一个单选按钮时，它成功地将文本字段设置为只读，但引导切换似乎没有切换（当它应该切换到否时它仍然设置为是）。但是，当我再次单击 Toggle 时，它保持为是，但执行 JavaScript，就好像它被设置为是一样。所以这让我认为当我选择单选按钮时，Toggle 的值成功设置为 No，但 Toggle 没有显示/动画切换到 No。 所以也许我在问如何让 Toggle 显示切换到 No 的动画。

谢谢！

【问题讨论】：

标签： javascript html twitter-bootstrap

【解决方案1】：

在好朋友的帮助下想通了。

当单选按钮被选中时，我需要将“off”类添加到 Toggle 的父元素。所以我不得不在函数中添加 2 行，它可以按需要工作：

var parentInd = $("#neutralInd").parent();
parentInd.addClass("off");

所以这是生成的函数代码：

    function setEventSite(chosen) {
      var neutralInd = document.getElementById("neutralInd");
      var locationOverride = document.getElementById("locationOverride");
      var homeTeam = document.getElementsByName("homeTeam");
      var parentInd = $("#neutralInd").parent();

      if (chosen == "neutral") {
        if (neutralInd.checked) {
          locationOverride.readOnly = false;
          for(var i=0; i<homeTeam.length; i++) { homeTeam[i].checked = false; }
        }
        else {
          locationOverride.value = "";
          locationOverride.readOnly = true;
        }
      } else if (chosen == "team")
      {
        neutralInd.checked = false;
        neutralInd.value="off";
        parentInd.addClass("off");
        locationOverride.value = "";
        locationOverride.readOnly = true;
      }
    }

【讨论】：