Отображать сообщение, когда установлены 2 флажка начальной загрузки
Я пытаюсь получить всплывающее сообщение, когда пользователь выбирает 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>
<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>
<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"> Message </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 конкретных переключателя / флажка.
Спасибо