0
356
ViewsHow to get the switch toggle switch current state(true/false) onload in Javascript
I have a multiple switch toggle which is coming from PHP/Mysql code, I want to show the div in that toggle which is currently ON.
Also, I want to show/hide div when that toggle switch on/off
My Php Code:
<li>
<?php echo $_ship_method_value['shipping_title'];?>
<label class="switch">
<!-- Toggled Case -->
<input type="checkbox" id="toggd" name="toggle" value="<? echo $_ship_method_value['shipping_id']; ?>" class='cmn-toggle cmn-toggle-round' data-switchery <? if(array_key_exists("shipping_available",$_ship_method_value)) echo 'checked'; ?> />
<span class="slider round hide-off"></span>
</li>
<div class="show-hide">
<p>Want to show this div ;-)</p>
</div>
My jQuery Code
$('input[name=toggle]').change(function(){
var mode = $(this).prop('checked');
if(mode == true){
$(".show-hide").show();
}else{
$(".show-hide").hide();
}
});'
but this code is only working on click of toggle for the single toggle event.
Please help me to find the solution. Thank you!
·
Juan Pablo Isaza
2 answers
Answer question0
$('.toggle_check_box').change(function(){
var mode = $(this).prop('checked');
if(mode == true){
$(".show-hide").show();
}else{
$(".show-hide").hide();
}
});
you can apply class for your checkbox and use like this.. This will toggle div on all switch button
·
Juan Pablo Isaza
Report
0
$('body').on('change', 'input[name=toggle]', function() {
var mode = $(this).prop('checked');
if (mode == true) {
$(".show-hide").show();
} else {
$(".show-hide").hide();
}
});
** Update **
If div is located next to li then the bellow code will work for you.
$('body').on('change', 'input[name=toggle]', function() {
var mode = $(this).prop('checked');
if (mode == true) {
$(this).closest("li").next(".show-hide").show();
} else {
$(this).closest("li").next(".show-hide").hide();
}
});
·
Juan Pablo Isaza
Report
Answer question