OnChange SwitchButton

by mogador

HTML

<link rel="stylesheet" href="http://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<link rel="stylesheet" href="http://jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css">
<script src="http://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<p>
Change Switch button : the value returned in "on change" function of jqxSwitchButton is the value BEFORE the change.<br />
But when you use on Change function on radiobutton, dropdownlist, etc… the value returned in "on change" function is the value AFTER change.
</p>
<div id="jqxSwitchButton"></div>
<br />
<div id='jqxRadioButton'>Radio Button</div>
<div id='jqxRadioButton2'>Radio Button 2</div>
<br />

<div id='jqxDropDownList'></div>

JavaScript

$('#jqxSwitchButton').jqxSwitchButton({
    height: 35,
    width: 80,
    theme: 'energyblue'
});


$('#jqxSwitchButton').on('change', function (event) {
	var checked = $('#jqxSwitchButton').jqxSwitchButton('checked');

    alert("onChange : the value of the button is " + checked);
});


// radio
 $("#jqxRadioButton").jqxRadioButton({
     width: 120,
     height: 25,
     theme: 'energyblue'
 });
 $("#jqxRadioButton2").jqxRadioButton({
     width: 120,
     height: 25,
     theme: 'energyblue'
 });
 $('#jqxRadioButton').on('change', function (event) {
 	var value = $("#jqxRadioButton").val();
 
     alert("onChange : the state of jqxRadioButton is " + value);
 });
 
  $('#jqxRadioButton2').on('change', function (event) {
 	var value = $("#jqxRadioButton2").val();
 
     alert("onChange : the state of jqxRadioButton2 is " + value);
 });
 
 // dropdown
  var source = [
       "Affogato",
       "Americano",
       "Bicerin",
       "Breve",
       "Café Bombón",
       "Café au lait",
       "Caffé Corretto",
       "Café Crema",
       "Caffé Latte"];
   // Create a jqxDropDownList
   $("#jqxDropDownList").jqxDropDownList({
       source: source,
       theme: 'energyblue',
       width: '200px',
       height: '25px',
       selectedIndex: 3
   });
   $('#jqxDropDownList').on('change', function (event) {
   var selectedIndex = $('#jqxDropDownList').jqxDropDownList('selectedIndex'); 
   alert(" index selected is " + selectedIndex);
   });