在切换按钮切换时显示消息

Question

我正在使用 Bootstrap Switch 在切换开关中打开我的复选框。

现在我想根据开关是打开还是关闭显示不同的消息。听起来很简单......但我似乎无法让它发挥作用:(

我的HTML:

<div class="approve-delivery">
  <label for="config-email" class="control-label col-xs-5">
    Do you want to send out email?
  </label>
  <input type="checkbox" id="config-email" onclick="ToggleSwitchMessage('config-email', 'enable-msg', 'disable-msg')" checked/>
</div>

<div class="email-config-msg">
  <p id="enable-msg">
      All emails will be sent.
  </p>
  <p id="disable-msg">
      No email will be sent.<br/>
      Please remember, you must turn email ON again if you want emails to
      be sent during this login session.
  </p>
</div>

还有我的jQuery：

function ToggleSwitchMessage(checkId, firstCommentId, secondCommentId) {
  var check_box = document.getElementById(checkId)
  var first_alert = document.getElementById(firstCommentId);
  var second_alert = document.getElementById(secondCommentId);

  if (check_box.checked == true) {
    first_alert.style.visibility = "visible";
    first_alert.style.display = "inline-block";
    second_alert.style.visibility = "hidden";
    second_alert.style.display = "none";
  } else {
    first_alert.style.visibility = "hidden";
    first_alert.style.display = "none";
    second_alert.style.visibility = "visible";
    second_alert.style.display = "inline-block";
  }
}

这是我的作品JSFiddle

同样，这就是我想要做的：

基于复选框 checked/unchecked，页面加载时应显示正确的消息
然后如果复选框的选项被更改，它应该显示适当的消息

我希望我说得有道理（英语不是我的母语）！另外，如果这是重复的问题，我很抱歉，在这种情况下，请提供 Q/A(s) 的 URL。

提前感谢您的宝贵时间和帮助！

Answer 1

您的代码可以正常工作，只是您必须将复选框上的事件从单击更改更改。由于在复选框上选中/取消选中时会触发更改事件。

<input type="checkbox" id="config-email"
    onchange="ToggleSwitchMessage('config-email', 'enable-msg', 'disable-msg')" checked/>

Answer 2

此代码的问题在于它尝试创建元素的 onClick 事件而不是 onChange。如果将其更改为 onChange，它会正常工作。

<input type="checkbox" id="config-email"
    onChange="ToggleSwitchMessage('config-email', 'enable-msg', 'disable-msg')" checked/>

根据在启动时显示的消息，在 document.ready 函数中使用相同的参数调用此函数。

更新您的评论：

以下修改后的代码在您的 fiddle.

中完美运行

$(document).ready(function () {
    $("input#config-email").bootstrapSwitch( {
    onText: 'Enable',
    onColor: 'primary',
    offText: 'Disable',
    offColor: 'warning',
    size: 'normal'
  });

    ToggleSwitchMessage('config-email', 'enable-msg', 'disable-msg')
});

在切换按钮切换时显示消息

Display message upon Switch button toggle

jquery

checkbox

twitter-bootstrap-3

bootstrap-switch