CSS Toggle Switch - Get selected value with jQuery
HTML
<link rel="stylesheet" href="http://ghinda.net/css-toggle-switch/toggle-switch.css">
<label class="checkbox toggle candy" onclick="" id="checkbox-switch">
<input id="view" type="checkbox" />
<p>
Wireless
<span>On</span>
<span>Off</span>
</p>
<a class="slide-button"></a>
</label>
<label>View</label>
<div class="switch switch-five candy yellow" id="radio-switch">
<input id="hour3" name="view3" type="radio" value="Hour" checked="checked">
<label for="hour3" onclick="">Hour</label>
<input id="day4" name="view3" type="radio" value="Day">
<label for="day4" onclick="">Day</label>
<input id="week5" name="view3" type="radio" value="Week">
<label for="week5" onclick="">Week</label>
<input id="month6" name="view3" type="radio" value="Month">
<label for="month6" onclick="">Month</label>
<input id="year7" name="view3" type="radio" value="Year">
<label for="year7" onclick="">Year</label>
<span class="slide-button"></span>
</div>
<a href="#" class="get-active">Get Active</a>
JavaScript
var getActives = function() {
var selectedCheckboxValue = $('#checkbox-switch input:checked').val() || false;
alert('If wireless on?: ' + selectedCheckboxValue);
var selectedRadioValue = $('#radio-switch input:checked').val();
alert('The selected View is: ' + selectedRadioValue);
};
$('input').change(getActives);
$('.get-active').click(getActives);