Question

当用户选择2个引导切换复选框时，我试图弹出一条消息。到目前为止我有这个设置：

我的HTML：

<div>
  <p id="enable-msg"><span class="glyphicon glyphicon-thumbs-up"></span></p>
  <p id="disable-msg"><span class="glyphicon glyphicon-thumbs-down"></span></p>

  &nbsp;&nbsp;
  <label for="cure">
  <input type="checkbox" id="Checkbox1" onclick="showHide();" onchange="ToggleSwitchMessage('Checkbox1', 'enable-msg', 'disable-msg')" >
  Criteria 1</label>
</div>

<div>
  <p id="enable-msg2"><span class="glyphicon glyphicon-thumbs-up"></span></p>
  <p id="disable-msg2"><span class="glyphicon glyphicon-thumbs-down"></span></p>

  &nbsp;&nbsp;
  <input type="checkbox" id="Checkbox2" onchange="ToggleSwitchMessage('Checkbox2', 'enable-msg2', 'disable-msg2')" unchecked/>

  <label for="shortTerm" class="control-label">Criteria 2</label>
  <br>
  <label class="curemsg green" id="Text1">&nbsp;Message&nbsp;</label>
</div>

我的javascipt：

$('input[type="checkbox"]').click(function () {
    $('.curemsg').hide();
    if ($('#Checkbox1').is(':checked') && $('#Checkbox2').is(':checked')) $('.curemsg').show();
});

$(document).ready(function() {
  $("input#Checkbox1").bootstrapSwitch({});
  ToggleSwitchMessage('Checkbox1', 'enable-msg', 'disable-msg')
});

$(document).ready(function() {
  $("input#Checkbox2").bootstrapSwitch({});
  ToggleSwitchMessage('Checkbox2', 'enable-msg2', 'disable-msg2')
});

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";
  }
}

我的CSS：

#enable-msg,
#enable-msg2 {
  display: inline;
  color: green;
}

#disable-msg,
#disable-msg2 {
  display: inline;
  color: red;
}

.curemsg {
  display: none;
}

.green {
    background: #00ff00;
}

这是我的Jsfiddle

最终我将有大约10个切换开关，但我希望能够在选择了2个特定的切换开关/复选框时显示消息。

谢谢

选中2个bootstraptoggle复选框时显示消息

0 个答案: