javascript - 2 つの bootstraptoggle チェックボックスが選択されている場合にメッセージを表示する

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>

私のjavascript:

$('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 つの特定のトグルスイッチ/チェックボックスが選択されたときにメッセージを表示できるようにしたいと考えています。

ありがとうございました