I am trying to get a message to pop up when a user selects 2 bootstrap toggle checkboxes. I have this set up so far:
My 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>
My 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";
}
}
My CSS:
#enable-msg,
#enable-msg2 {
display: inline;
color: green;
}
#disable-msg,
#disable-msg2 {
display: inline;
color: red;
}
.curemsg {
display: none;
}
.green {
background: #00ff00;
}
Here is my Jsfiddle
Ultimately I will have about 10 toggleswitches but I want to be able to display a message when 2 specific toggleswitches/checkboxes have been selected.
Thank you
Aucun commentaire:
Enregistrer un commentaire