I am using Bootstrap Switch to turn my check-box in toggle switches.
Now I want to display different messages based on whether the switch is ON or OFF. Sounds simple enough...but I can't seem to make it work :(
My 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>
And my 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";
}
}
Here is my working JSFiddle
Again, this is what I'm trying to do:
- based on the check-box checked/unchecked, the proper message should be displaying on the page when it loads
- then if the check-box's option is changed, it should display appropriate message
I hope I am making sense (English is not my first language)! Also I'm sorry if it's duplicate question, in that case please provide the URL of the Q/A(s).
Thank you in advance for your time and help!!
Aucun commentaire:
Enregistrer un commentaire