I'm using bootstrap toggle in my project to create a toggle switch.
This is the code for my toggle switch (the default side is "Primary Analysis", and the other side is titled "Secondary Analysis):
<label class="checkbox-inline">
<input type="checkbox" id="toggle-event" checked data-toggle="toggle" data-on="Primary Analysis" data-off="Secondary Analysis">
</label>
Next to my toggle switch, I have a button titled "Analyze".
Here's what I want to do:
When the toggle switch is turned to the side that reads "Primary Analysis", then if I hit the "analyze" button, I want to render a certain chart. It's a Highcharts chart that's contained in a div tag with the id "chart1".
And when the toggle switch is turned to the side that reads "Secondary Analysis", then if I hit the "analyze" button, then I want to render a different chart. This chart is a highcharts chart that's contained in a div tag with the id "chart2".
I was reading a tutorial on the Bootstrap Toggle website on event propgation, this might be helpful:
<input id="toggle-event" type="checkbox" data-toggle="toggle">
<div id="console-event"></div>
<script>
$(function() {
$('#toggle-event').change(function() {
$('#console-event').html('Toggle: ' + $(this).prop('checked'))
})
})
</script>
Any ideas?