[SOLVED] Trigger event in toggle changes?

Questions
1

Trying to figure out how to trigger an event (we will say an alert for sake of this question) when a toggle is toggled to the ‘on’ position but I can not figure it out. This is what I have thus far…

This is my index.html (edited to remove unneeded code, etc)…

<body class="color-theme-indian">
<div id="app">
<!-- Status bar overlay for fullscreen mode-->
<div class="statusbar"></div>
<!-- Settings panel -->
<div class="panel panel-right panel-reveal theme-dark" id="settings-panel">
<div class="view">
<div class="page">
<div class="navbar">
<div class="navbar-inner">
<div class="title">Right Panel</div>
</div>
</div>
<div class="page-content">
<div class="block">Settings</div>
<div class="list simple-list">
<ul>
<li>
<span>Dark Mode</span>
label class="toggle toggle-init color-red">
<input type="checkbox" class="toggle" unchecked/>
<span class="toggle-icon"></span>
</label>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- Your main view, should have "view-main" class -->
<div class="view view-main ios-edges">
<!-- Page, data-name contains page name which can be used in callbacks -->
<div class="page" data-name="home">
<!-- Top Navbar -->
<div class="navbar">
<div class="navbar-inner">
<div class="title sliding">My App</div>
<div class="right">
<a href="#" class="link icon-only panel-open" data-panel="right">
<i class="icon f7-icons ios-only">settings</i>
<i class="icon material-icons md-only">settings</i>
</a>
</div>
</div>
</div>
<!-- Scrollable page content-->
<div class="page-content">
BLAH BLAH BLAH
</div>
</div>
</div>
<!-- Cordova
<script src="cordova.js"></script> -->
<!-- Framework7 library -->
<script src="framework7/js/framework7.min.js"></script>
<!-- App routes -->
<script src="js/routes.js"></script>
<!-- Your custom app scripts -->
<script src="js/app.js"></script>
</body>

And here is my app.js

// Dom7
var $$ = Dom7;

// Framework7 App main instance
var app  = new Framework7({
  on: {
    init: function () {
      //sqllite.initialize()
    },
    pageInit: function () {
      console.log('Page initialized')
    },

  },
  root: '#app', // App root element
  },
  sheet: {
    closeByBackdropClick: false,
  },

  // App routes
  routes: routes,
});

var toggle = app.toggle.create({
  el: '.toggle',
  on: {
    change: function () {
      alert ('Toggle changed')
    }
  }
})

// Init/Create main views 
var mainView = app.views.create('.view-main', {
  url: '/'
});

With this code I get an alert every time ANY toggle changes. I want to perform and action if the toggle (“Dark Mode”) is clicked to the ‘one’ position. How can I do this?

2

Ok, so I have got it to perform a function anytime the toggle changes (‘on’ to ‘off’ or ‘off’ to ‘on’) with the following code:

$$('#toggle-dark').on('change', function () {
  alert("Hooray");
//  msgTest();
});

Now, I need help with how to trigger event only when toggle is ‘on’

3

im at the phone. so i cannot test.
but look at the element prop for checked, or wahtever you need.
eg:

{
 if (this.checked) alert('Hooray')
}
4

I used this is my app.js and it works. Now, I am sure there is a better way but for me it works…

$$('#toggle-dark').on('change', function () {
  if ($$('#toggle-dark').prop('checked') == true) {
    alert("YES");
  } else {
    alert("NO");
  }
});