jquery - Display message upon Switch button toggle -
i using bootstrap switch turn check-box in toggle switches.
now want display different messages based on whether switch on or off. sounds simple enough...but can't seem make work :(
my html:
<div class="approve-delivery"> <label for="config-email" class="control-label col-xs-5"> want 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"> emails sent. </p> <p id="disable-msg"> no email sent.<br/> please remember, must turn email on again if want emails sent during login session. </p> </div>
and 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 working jsfiddle
again, i'm trying do:
- based on check-box checked/unchecked, proper message should displaying on page when loads
- then if check-box's option changed, should display appropriate message
i hope making sense (english not first language)! i'm sorry if it's duplicate question, in case please provide url of q/a(s).
thank in advance time , help!!
the problem code tries create onclick event of element onchange. works fine if change onchange.
<input type="checkbox" id="config-email" onchange="toggleswitchmessage('config-email', 'enable-msg', 'disable-msg')" checked/>
as per displaying message on startup itself, call function same arguments in document.ready function.
update comment:
the following modified code works in fiddle.
$(document).ready(function () { $("input#config-email").bootstrapswitch( { ontext: 'enable', oncolor: 'primary', offtext: 'disable', offcolor: 'warning', size: 'normal' }); toggleswitchmessage('config-email', 'enable-msg', 'disable-msg') });
Comments
Post a Comment